1. visibilityプロパティの値

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

　
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と同じ結果となります。）

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

　
ソースは次の通りです。

（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>

▲目次へ戻る