【19】visibility で表示か非表示かを指定しよう

visibilityプロパティは、要素を表示するか非表示にするか指定します。
ブロックレベル・インラインに関係なく、どんな要素にも使えます。

大昔からあるプロパティで、CSS3でも変更点は特になく、とても単純明快なプロパティです。

本日のINDEX

1. visibilityプロパティの値
2. visibility: hidden と display: none の違い
3. table のセルを非表示にする visibility: collapse

visibilityプロパティの値

visibilityプロパティには以下の値があります。

visible	これがデフォルト値。表示します。
hidden	領域を確保したまま非表示。
collapse	tableのセルを非表示にする。テーブル専用の値です。 （table関連じゃない要素に使ったら hidden になります）

値の継承	あり	適用できる要素	全部

visibility: hidden と display: none の違い

要素を非表示にしたいときに使う visibility: hidden ですが、よく比較される display: none というのもあります。
その違いは、
visibility: hidden は、領域があるまま非表示（編集用語だとトルママ）
display: none は、領域ごと無くなる（トルツメ）

この2つを比較したほうがわかりやすいので、サンプルを見てみましょう。
このようなメニューを用意して...

• MENU1
• MENU2
• MENU3

真ん中の「MENU2」に visibility: hidden を指定します。
スペースがそのまま残っています。領域があるまま非表示ですね。

• MENU1
• MENU2
• MENU3

上のサンプルのHTMLです。

<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>

サンプルのCSSです。

ul {margin:0; padding:0}
ul li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	display: inline-block;
	text-align:center;
	margin:0 10px 0 0;
	border-radius:10px;
	padding:1em;
	width:20%;
	background:#fdf5a0;}
ul li:nth-child(2) {background:#fed5f4; visibility:hidden}
ul li:nth-child(3) {background:#c9f0ff}

真ん中の「MENU2」に display: none を指定します。
スペースが詰められて次の要素が並んでます。こっちは 領域も無くなるんですね。
スペースを残したかったら visibility: hidden、詰めたかったら display: none ってことですね。

• MENU1
• MENU2
• MENU3

サンプルのCSSです。（HTMLは変わらず）

ul {margin:0; padding:0}
ul li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	display: inline-block;
	text-align:center;
	margin:0 10px 0 0;
	border-radius:10px;
	padding:1em;
	width:20%;
	background:#fdf5a0;}
ul li:nth-child(2) {background:#fed5f4; display:none}
ul li:nth-child(3) {background:#c9f0ff}

table のセルを非表示にする visibility: collapse

visibilityプロパティの値の中で「collapse」だけは ちょっと毛色が変わってて、テーブル関連の要素専用なんです。
table関連じゃない要素に使ったら visibility: hidden と同じ状態になるそうです。

visibility: collapse は、テーブルのセルを非表示にします。
セルって <td> とか <th> とかテーブル内の最小部品ね。

下のサンプルは、カレンダーの前月分の日付のセル（<td>）に　クラス「.hide」を指定し、visibility: collapse を指定しています。
翌月分の日付は「colspan属性」で <td>をひとまとめにして使ってみました。

January
sun	mon	tue	wed	thu	fri	sat
27	28	29	30	31	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

上のサンプルのHTMLです。

<table id="smp2">
  <tr>
    <th colspan="7">January</th>
    </tr>
  <tr class="youbi">
    <td>sun</td>
    <td>mon</td>
    <td>tue</td>
    <td>wed</td>
    <td>thu</td>
    <td>fri</td>
    <td>sat</td>
  </tr>
  <tr>
    <td class="hide">27</td>  <!--前月の27日から31日までを非表示に-->
    <td class="hide">28</td>
    <td class="hide">29</td>
    <td class="hide">30</td>
    <td class="hide">31</td>
    <td class="holiday">1</td>
    <td>2</td>
  </tr>
   〜途中省略〜
  <tr>
    <td>31</td>
    <td colspan="6" class="hide"></td>  <!--翌月の1日からを colspan属性でまとめて-->
  </tr>
</table>

サンプルのCSSです。

table#smp2 {
	background:#f2f1e6;
	margin: 0;
	padding:0;
	table-layout:fixed;
	border-spacing:5px;
	width:100%;}
table#smp2 tr th,table#smp2 tr td {text-align:center;}
table#smp2 tr th { font-size:120%; background:rgba(255,255,255,0.5)}
table#smp2 tr td { padding:5px; background:#fff;}
table#smp2 tr.youbi td {font-size:small; padding:1px; background:#fdf5a0; border:none;}
table#smp2 tr td:nth-child(1),
table#smp2 tr td.holiday {background:#fed5f4; color:red}
table#smp2 tr td:nth-child(7) {background:#c9f0ff; color:blue}
table#smp2 tr td.hide {
	visibility: collapse}

<tr> <colgroup> <col> <thead> <tfoot> <tbody>にも使えます

上のサンプルでは、テーブルセル <td>要素に visibility: collapse を使用しましたが、
セルのセットである以下の要素にも使えます。
<tr> <colgroup> <col> <thead> <tfoot> <tbody>

サンプルを見てみましょう。
下のテーブルは上から、
<thead>（ベージュの部分）
<tbody>（クリーム色の部分）
<tfoot>（グリーンの部分）の3つに分けています。

エリア	店舗名	来店総数	新規来店	リピート
A	渋谷店	100	80	20
	神宮前店	150	100	50
	青山店	200	120	80
B	三軒茶屋店	100	80	20
	二子玉川店	150	100	50
合計		700	480	220

<tbody>（クリーム色の部分）に visibility:collapse を指定するとこうなります。

エリア	店舗名	来店総数	新規来店	リピート
A	渋谷店	100	80	20
	神宮前店	150	100	50
	青山店	200	120	80
B	三軒茶屋店	100	80	20
	二子玉川店	150	100	50
合計		700	480	220

上のサンプルのHTMLです。

<table id="smp4">
<thead>  <!--theadを使ってグループにしています-->
  <tr>
    <th class="b_left">エリア</th>
    <th>店舗名</th>
    <th>来店総数</th>
    <th>新規来店</th>
    <th>リピート</th>
  </tr>
</thead>

<tbody> <!--tbodyを使ってグループにしています-->
  <tr>
    <th rowspan="3" class="b_left">A</th>
    <td>渋谷店</td>
    <td>100</td>
    <td>80</td>
    <td>20</td>
  </tr>
   〜途中省略〜
  <tr>
    <td>二子玉川店</td>
    <td>150</td>
    <td>100</td>
    <td>50</td>
  </tr>
</tbody>

<tfoot>  <!--tfootを使ってグループにしています-->
  <tr>
    <th colspan="2" class="b_left">合計</th>
    <td>700</td>
    <td>480</td>
    <td>220</td>
  </tr>
</tfoot>
</table>

サンプルのCSSです。tbodyのtrに visibility:collapseを指定。

table#smp4 {
	width:100%;
	margin:0 0 3em;
	border-top:1px solid #ccc;
	border-spacing:0px}
.b_left {border-left: 1px solid #ccc}
table#smp4 tr th, table#smp4 tr td {
	text-align:center;
	font-size:12px;
	border-bottom:1px solid #ccc;
	border-right:1px solid #ccc;
	padding: 3px}
table#smp4 thead tr {background:#F0E1D8}
table#smp4 tbody tr {background: #ffc}
table#smp4 tbody {visibility:collapse}
table#smp4 tfoot tr {background:#86BD7E; color:#FFF}
table#smp4 tfoot tr td {font-weight:bold}

テーブル関係の要素については、
[16-3] table のセルを連結しよう（colspan属性, rowspan属性）
[16-5] table横列グループ化 <thead> <tbody> <tfoot>
[16-6] table縦列グループ化 <colgroup> <col>
をご覧ください。

また、visibility: collapse と似たような使い方ができる empty-cells: hide があります。
これもテーブル専用のプロパティですが、こっちは空のセル限定。
指定したセルが 空（から：中身が何も無い）だったら自動的にセルを非表示にします。中身があれば表示される。
だから空のセルだったらこっちの empty-cells: hide のほうがオススメ。
詳細はこちらで↓
[16-4] table のセルの枠線を非表示にしよう（CSS使用_empty-cells）

次回予告

次回は overflowプロパティを使ってみましょう。
overflowはボックスから「あふれた」中身をどうするか決めるモノで、要素の幅や高さを制限した場合に、ぜひ知っておきたい便利なプロパティです。