visibilityプロパティは、HTML要素の表示(visible)と非表示(hidden)を指定する際に使用するプロパティです。
非表示の指定をした場合でも、要素の領域は確保されているので、ページのレイアウトに影響を及ぼすことはありません。
今回は、visibilityプロパティについてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
visibilityプロパティの値は、次の通りです。
visible | デフォルト値 表示する |
---|---|
hidden | 非表示にする |
collapse | テーブルのセルを非表示にする (テーブル専用の値で、他の要素に使うとhiddenと同じ結果となる) |
visibilityプロパティの値は、継承されます。
また、visibilityプロパティは、全ての要素で使用できます。
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>1</section>
<section>2</section>
<section>3</section>
</div>
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>
INTERNOUS,inc. All rights reserved.