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によってそれぞれ非表示に指定すると、次のように表示されます。

　
ソースは次の通りです。

（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>１</section>
  <section>２</section>
  <section>３</section>
</div>

▲目次へ戻る

3. visibility: collapse

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

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

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>

▲目次へ戻る