ITコラム

businessman with jigsaw screen, business strategy concept

ITコラム

2017.05.19

CSS【 visibility 】 ~ 表示と非表示

visibilityプロパティは、HTML要素の表示(visible)と非表示(hidden)を指定する際に使用するプロパティです。
非表示の指定をした場合でも、要素の領域は確保されているので、ページのレイアウトに影響を及ぼすことはありません。
今回は、visibilityプロパティについてまとめたいと思います。

目次

 1.visibilityプロパティの値
 2.visibility: hidden と display: none
 3.visibility: collapse

1.visibilityプロパティの値

visibilityプロパティの値は、次の通りです。

visible デフォルト値
表示する
hidden 非表示にする
collapse テーブルのセルを非表示にする
(テーブル専用の値で、他の要素に使うとhiddenと同じ結果となる)

visibilityプロパティの値は、継承されます。
また、visibilityプロパティは、全ての要素で使用できます。

▲目次へ戻る

2.visibility: hidden と display: none

visibilityプロパティにhiddenを指定すると、要素が非表示になります。
そして、displayプロパティにnoneを指定しても、要素が非表示となります。

両者は、要素が非表示になる際にその要素の領域がどうなるかという点で違いがあります。
display: noneは、領域ごとなくなりますが、visibility: hidden は、領域を残したまま要素のみ非表示となります。

3つのsection要素の内、真ん中の要素をvisibility:hiddenとdisplay:noneによってそれぞれ非表示に指定すると、次のように表示されます。

■「1」「2」「3」全て表示

 

■visibility:hiddenで「2」を非表示

 

■display:noneで「2」を非表示

 
ソースは次の通りです。

(CSS)
div#sample {margin:0; padding:0;} 
div#sample section {
	display: inline-block;
	text-align:center;
	margin:0 10px 0 0;
	border-radius:10px;
	padding:1em;
	width:20%;
	background:pink;}

/*visibility:hiddenで非表示にする場合*/
div#sample section:nth-child(2) {background:skyblue; visibility:hidden}
/*display:noneで非表示にする場合*/
div#sample section:nth-child(2) {background:skyblue; display:none}

div#sample section:nth-child(3) {background:tomato}

(HTML)
<div id="sample">
  <section>1</section>
  <section>2</section>
  <section>3</section>
</div>

▲目次へ戻る

3.visibility: collapse

visibilityプロパティにcollapseを指定すると、テーブルのセルが非表示になります。
キーワードのcollapseは、テーブル関連の要素専用の値です。
(テーブル関連の要素以外の要素にcollapseを指定すると、visibility:hiddenと同じ結果となります。)

テーブルでカレンダーを作成する際に、当月の日付が入らないセルを非表示にすると、すっきりとした見た目になりますs。

2017/5
30 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

 
ソースは次の通りです。

(CSS)
table#sample {
	background:whitesmoke;
	margin: 0;
	padding:0;
	table-layout:fixed;
	border-spacing:5px;
	width:100%;}
table#sample tr th, table#sample tr td {text-align:center;}
table#sample tr th { font-size:120%; background:rgba(255,255,255,0.5);}
table#sample tr td { padding:5px; background:white;}
table#sample tr.youbi td {font-size:small; padding:1px; background:pink; border:none;}
table#sample tr td:nth-child(1) {background:tomato;}
table#sample tr td:nth-child(7) {background:skyblue;}
table#sample tr.hide, table#sample tr td.hide {visibility:collapse;}

(HTML)
<table id="sample">
  <tr>
    <th colspan="7">2017/5</th>
    </tr>
  <tr class="youbi">
    <td>日</td>
    <td>月</td>
    <td>火</td>
    <td>水</td>
    <td>木</td>
    <td>金</td>
    <td>土</td>
  </tr>
  <tr>
    <td class="hide">30</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
  </tr>
  <tr>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
  </tr>
  <tr>
    <td>28</td>
    <td>29</td>
    <td>30</td>
    <td>31</td>
    <td colspan="3" class="hide"></td>
  </tr>
</table>

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.