CSS | visibility | 非表示

visibilityは要素の非表示を指定するためのCSSプロパティです。display: none、opacity: 0との違いも開設します。visibility: collapseは<table>要素に対して使用します。

`visibility`の設定値
設定値	説明	デフォルト
`visible`	表示
`hidden`	非表示
`collapse`	非表示 (`<table>`要素の内部要素に対してのみ使う)

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    padding:          5px;            /* 内側の余白 */
    margin:           5px;            /* 外側の余白 */
}

実行結果初期状態

div-1

div-2

div-3

div-4

div-5

`: hidden`

visibilityをhiddenにすると、非表示になります。クラス.div-2と.div-4に指定してみます。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    padding:          5px;            /* 内側の余白 */
    margin:           5px;            /* 外側の余白 */
}

CSS


.div-2,
.div-4 {
    visibility: hidden;
}

実行結果visibility: hidden

div-1

div-2

div-3

div-4

div-5

`display: none`との違い

display: noneも要素を非表示にするために使います。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    padding:          5px;            /* 内側の余白 */
    margin:           5px;            /* 外側の余白 */
}

CSS


.div-2,
.div-4 {
    display: none;
}

実行結果display: none

div-1

div-2

div-3

div-4

div-5

display: noneとvisibility: hiddenの違いは要素を削除するか否(いな)かです。 display: noneの場合、要素は削除され存在していません。よって、表示していたエリアも無くなります。一方、visibility: hiddenで非表示にした要素は存在しています。また、表示していたエリアも確保されたままです。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    padding:          5px;            /* 内側の余白 */
    margin:           5px;            /* 外側の余白 */
}

CSS


.div-2 {
    display: none;
}

.div-4 {
    visibility: hidden;
}

実行結果display: noneとvisibility: hidden

div-1

div-2

div-3

div-4

div-5

`opacity: 0`との違い

opacity: 0でも要素を非表示にすることができます。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    padding:          5px;            /* 内側の余白 */
    margin:           5px;            /* 外側の余白 */
}

CSS


.div-2,
.div-4 {
    opacity: 0;
}

実行結果opacity: 0

div-1

div-2

div-3

div-4

div-5

見た目はvisibility: hiddenと同じですが、opacity: 0の場合は.div-2が存在しているべき場所(.div-1と.div-3の間)からクリップボードに文字列(div-2)をコピーできます。一方、(visibility: hiddenを使っている).div-4からクリップボードにコピーすることはできません。

HTML


<div class="sample div-1">div-1</div>
<div class="sample div-2">div-2</div>
<div class="sample div-3">div-3</div>
<div class="sample div-4">div-4</div>
<div class="sample div-5">div-5</div>

CSS


.sample {
    background-color: #ccf;           /* 背景 */
    border:           3px solid blue; /* 境界線 */
    padding:          5px;            /* 内側の余白 */
    margin:           5px;            /* 外側の余白 */
}

CSS


.div-2 {
    opacity: 0;
}

.div-4 {
    visibility: hidden;
}

実行結果opacity: 0

div-1

div-2

div-3

div-4

div-5

opacity: 0だと色が透明になるだけで、要素はそのまま存在しています。

`: collapse`

visibility: collapseは<tr>、<col>、<thead>、<tbody>、<tfoot>、<colgroup>に対してのみ指定します。 ※ 他の要素に使った場合はvisibility: hiddenと同じ結果です。

<table>要素を準備します。

HTML


<table>
    <colgroup>
        <col class="col-a">
        <col class="col-b">
        <col class="col-c">
        <col class="col-d">
    </colgroup>
    <tr class="tr-1">
        <td>1a</td><td>1b</td><td>1c</td><td>1d</td>
    </tr>
    <tr class="tr-2">
        <td>2a</td><td>2b</td><td>2c</td><td>2d</td>
    </tr>
    <tr class="tr-3">
        <td>3a</td><td>3b</td><td>3c</td><td>3d</td>
    </tr>
</table>

CSS


.tr-2,
.col-c {
    background-color: lightskyblue;
}

table {
    border: 4px solid red;  /* 境界線 */
}

td {
    border:  3px solid blue;
    padding: 5px 8px;       /* 内側の余白 */
}

実行結果初期状態

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d

(Firefoxなどの)一部のブラウザの場合、border-collapse: separateでないとvisibility: collapseが上手く表示されないようなので、border-collapse: separateを指定します。ここでは罫線の間を詰めるためにborder-spacing: 0も指定しておきます。

HTML


<table>
    <colgroup>
        <col class="col-a">
        <col class="col-b">
        <col class="col-c">
        <col class="col-d">
    </colgroup>
    <tr class="tr-1">
        <td>1a</td><td>1b</td><td>1c</td><td>1d</td>
    </tr>
    <tr class="tr-2">
        <td>2a</td><td>2b</td><td>2c</td><td>2d</td>
    </tr>
    <tr class="tr-3">
        <td>3a</td><td>3b</td><td>3c</td><td>3d</td>
    </tr>
</table>

CSS


.tr-2,
.col-c {
    background-color: lightskyblue;
}

table {
    border: 4px solid red;  /* 境界線 */
}

td {
    border:  3px solid blue;
    padding: 5px 8px;       /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;  /* <table>要素の罫線 */
    border-spacing:  0;
}

実行結果border-collapse: separate

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d

lightskyblueの背景色のセルを非表示にしてみます。

.tr-2クラスにvisibility: collapseを指定します。2行目が非表示になります。

HTML


<table>
    <colgroup>
        <col class="col-a">
        <col class="col-b">
        <col class="col-c">
        <col class="col-d">
    </colgroup>
    <tr class="tr-1">
        <td>1a</td><td>1b</td><td>1c</td><td>1d</td>
    </tr>
    <tr class="tr-2">
        <td>2a</td><td>2b</td><td>2c</td><td>2d</td>
    </tr>
    <tr class="tr-3">
        <td>3a</td><td>3b</td><td>3c</td><td>3d</td>
    </tr>
</table>

CSS


.tr-2,
.col-c {
    background-color: lightskyblue;
}

table {
    border: 4px solid red;  /* 境界線 */
}

td {
    border:  3px solid blue;
    padding: 5px 8px;       /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;  /* <table>要素の罫線 */
    border-spacing:  0;
}

CSS


.tr-2 {
    visibility: collapse;
}

実行結果.tr-2

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d

.col-cクラスにvisibility: collapseを指定すると3列目が非表示になります。

HTML


<table>
    <colgroup>
        <col class="col-a">
        <col class="col-b">
        <col class="col-c">
        <col class="col-d">
    </colgroup>
    <tr class="tr-1">
        <td>1a</td><td>1b</td><td>1c</td><td>1d</td>
    </tr>
    <tr class="tr-2">
        <td>2a</td><td>2b</td><td>2c</td><td>2d</td>
    </tr>
    <tr class="tr-3">
        <td>3a</td><td>3b</td><td>3c</td><td>3d</td>
    </tr>
</table>

CSS


.tr-2,
.col-c {
    background-color: lightskyblue;
}

table {
    border: 4px solid red;  /* 境界線 */
}

td {
    border:  3px solid blue;
    padding: 5px 8px;       /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;  /* <table>要素の罫線 */
    border-spacing:  0;
}

CSS


.col-c {
    visibility: collapse;
}

実行結果.col-c

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d

.tr-2クラスと.col-cクラスの両方にvisibility: collapseを指定するとlightskyblue色のセルが全て非表示になります。

HTML


<table>
    <colgroup>
        <col class="col-a">
        <col class="col-b">
        <col class="col-c">
        <col class="col-d">
    </colgroup>
    <tr class="tr-1">
        <td>1a</td><td>1b</td><td>1c</td><td>1d</td>
    </tr>
    <tr class="tr-2">
        <td>2a</td><td>2b</td><td>2c</td><td>2d</td>
    </tr>
    <tr class="tr-3">
        <td>3a</td><td>3b</td><td>3c</td><td>3d</td>
    </tr>
</table>

CSS


.tr-2,
.col-c {
    background-color: lightskyblue;
}

table {
    border: 4px solid red;  /* 境界線 */
}

td {
    border:  3px solid blue;
    padding: 5px 8px;       /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;  /* <table>要素の罫線 */
    border-spacing:  0;
}

CSS


.tr-2,
.col-c {
    visibility: collapse;
}

実行結果.tr-2 .col-c

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d

display: noneを使ってみる

visibility: collapseの代わりにdisplay: noneを使うことができそうですが、<col>要素に対しては異なる結果になるようです。

HTML


<table>
    <colgroup>
        <col class="col-a">
        <col class="col-b">
        <col class="col-c">
        <col class="col-d">
    </colgroup>
    <tr class="tr-1">
        <td>1a</td><td>1b</td><td>1c</td><td>1d</td>
    </tr>
    <tr class="tr-2">
        <td>2a</td><td>2b</td><td>2c</td><td>2d</td>
    </tr>
    <tr class="tr-3">
        <td>3a</td><td>3b</td><td>3c</td><td>3d</td>
    </tr>
</table>

CSS


.tr-2,
.col-c {
    background-color: lightskyblue;
}

table {
    border: 4px solid red;  /* 境界線 */
}

td {
    border:  3px solid blue;
    padding: 5px 8px;       /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;  /* <table>要素の罫線 */
    border-spacing:  0;
}

CSS


.col-c {
    visibility: collapse;
}

実行結果visibility: collapse

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d

HTML


<table>
    <colgroup>
        <col class="col-a">
        <col class="col-b">
        <col class="col-c">
        <col class="col-d">
    </colgroup>
    <tr class="tr-1">
        <td>1a</td><td>1b</td><td>1c</td><td>1d</td>
    </tr>
    <tr class="tr-2">
        <td>2a</td><td>2b</td><td>2c</td><td>2d</td>
    </tr>
    <tr class="tr-3">
        <td>3a</td><td>3b</td><td>3c</td><td>3d</td>
    </tr>
</table>

CSS


.tr-2,
.col-c {
    background-color: lightskyblue;
}

table {
    border: 4px solid red;  /* 境界線 */
}

td {
    border:  3px solid blue;
    padding: 5px 8px;       /* 内側の余白 */
}

CSS


table {
    border-collapse: separate;  /* <table>要素の罫線 */
    border-spacing:  0;
}

CSS


.col-c {
    display: none;
}

実行結果display: none

1a	1b	1c	1d
2a	2b	2c	2d
3a	3b	3c	3d

<table>要素に対しては、display: noneではなくvisibility: collapseを使いましょう。

: hidden

display: noneとの違い

opacity: 0との違い

: collapse

`: hidden`

`display: none`との違い

`opacity: 0`との違い

`: collapse`