visibility
: 表示/非表示 CSSプロパティ
このページで解説するコードの実行結果。(タイトルの文字列をクリックすると、コードに移動)
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
デフォルト
HTML
& CSS
このページでは、以下のコードをデフォルトとして使用している。
CSS : デフォルトCSS
div { border: 2px solid gray; /* 境界線 */ margin: 5px; /* 外側の余白 */ padding: 5px; /* 内側の余白 */ display: inline-block; /* 横並び */ } .sample-1 { background-color: #daa; } .sample-2 { background-color: #ada; } .sample-3 { background-color: #aad; } table { border: 2px solid gray; /* 境界線 */ margin: 5px; /* 外側の余白 */ border-collapse: separate; /* border-collapse */ border-spacing: 10px; /* border-spacing */ } td { border: 1px solid #999; /* 境界線 */ padding: 10px; /* 内側の余白 */ }
HTML : 適用するHTML
<div> <div class="sample-1"> sample-1 </div> <div class="sample-2"> sample-2 </div> <div class="sample-3"> sample-3 </div> </div> <table> <tr class="row-1"> <td class="sample-1">1-1</td> <td class="sample-2">1-2</td> <td class="sample-3">1-3</td> </tr> <tr class="row-2"> <td class="sample-1">2-1</td> <td class="sample-2">2-2</td> <td class="sample-3">2-3</td> </tr> <tr class="row-3"> <td class="sample-1">3-1</td> <td class="sample-2">3-2</td> <td class="sample-3">3-3</td> </tr> </table>
実行結果
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
visibility
の概要
要素の表示/非表示を設定する。
※ hidden
と collapse
の違いは下に書いた。
visible
: 表示
.sample-2
クラスに対して設定する。
デフォルトなので表示される。
CSS : visible
.sample-2 { visibility: visible; }
実行結果
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
hidden
: 非表示
非表示になる。ただし、要素があったハズの場所のスペースは空けられる。
CSS : hidden
.sample-2 { visibility: hidden; }
実行結果
collapse
: 非表示
hidden
と同じ結果。
hidden
と collapse
の違いは下に書いた。ただし、display: none
との違いを理解してからの方が理解しやすい。
CSS : collapse
.sample-2 { visibility: collapse; }
実行結果
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
display: none
display: none
の場合も非表示にできるが、その場合は要素自体が削除されてスペースは詰められる。
CSS : display: none
.sample-2 { display: none; }
実行結果
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
ここまでの結果をまとめた表。
CSS | スペース |
---|---|
visibility: hidden; | 空けたまま |
visibility: collapse; | 空けたまま |
display: none; | 詰められる |
hidden
と collapse
の違い
hidden
と collapse
の違いが分からないので、表の2行目を非表示にしてみる。
具体的には、実行結果で赤の影が付いている部分。
CSS : row-2
.row-2 { box-shadow: 0 0 5px red; }
実行結果
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
hidden
の場合、(非表示の)行のスペースは空けたまま。
CSS : hidden
.row-2 { visibility: hidden; }
実行結果
collapse
の場合、詰められる。
CSS : collapse
.row-2 { visibility: collapse; }
実行結果
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
display: none
の場合も詰められる。
CSS : display: none
.row-2 { display: none; }
実行結果
sample-1
sample-2
sample-3
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
3-1 | 3-2 | 3-3 |
結果をまとめる。
CSS | 普通の要素 | 表の行 |
---|---|---|
visibility: hidden; | 空けたまま | 空けたまま |
visibility: collapse; | 空けたまま | 詰められる |
display: none; | 詰められる | 詰められる |
Emmet : v
記述 | Visual Studio Code |
---|---|
v | visibility: hidden; |