概要へ移動

このページで解説するコードの実行結果。（タイトルの文字列をクリックすると、コードに移動）

表示
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の概要

要素の表示／非表示を設定する。

（表） visibilityの設定値
設定値機能デフォルト
visible表示○
hidden非表示
collapse非表示

※ 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;

}
実行結果

ここまでの結果をまとめた表。

（表） 非表示にする設定
CSSスペース
visibility: hidden;空けたまま
visibility: collapse;空けたまま
display: none;詰められる

hidden と collapse の違い

hidden と collapse の違いが分からないので、表の２行目を非表示にしてみる。

具体的には、実行結果で赤の影が付いている部分。

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;

}
実行結果
sample-1
sample-2
sample-3
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3

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
vvisibility: hidden;