CSSのvisibility。要素の表示・非表示を制御する【CSSメモ】

CSSのvisibilityの概要

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

visibilityは要素の表示・非表示を制御するものです。

display:noneと似ていますが、違いはレイアウトが残ることです。

opacityを0にしてもリンクやマウスオーバーは機能してしまいますが、visibilityで非表示にすると、それらも非表示にすることができます。

MozillaのMDNは以下です。

visibility - CSS: カスケーディングスタイルシート | MDN

visibility は CSS のプロパティで、文書のレイアウトを変更することなく要素を表示したり非表示にしたりします。このプロパティは の行や列を隠すこともできます。

developer.mozilla.org

opacityの設定方法

設定は以下の3つになります。

visibility: visible;
visibility: hidden;
visibility: collapse;

visibleは表示状態です。

hiddenは非表示状態です。

collapseがちょっと複雑ですが、テーブルの行や列の該当部分を詰めて表示するときに使いやすい設定です。

opacityの設定例

以下には今開いているページが別タブで開くリンクが設定してあります。

そのままリンクを表示しているもの、opacityを0にしているもの、visibilityをhiddenにしているもの、display:noneを設定しているものがあります。

opacity 0は、マウスを持って行くとリンクを押せます。

visibility hiddenはリンクを押せませんが、レイアウトは残っています。

display:noneは、レイアウトもなくなっています。

リンクをそのまま表示

opacityのテスト用リンク

opacity:0 を適用

.opacity-1 {
  opacity: 0;
}

visibility:hidden を適用

.visi-1 {
  visibility:hidden;
}

display:none を適用

.none-1 {
  display: none;
}

opacityはあくまで不透明度を0にしているだけで、要素は残っています。

visibilityをhiddenにすると、要素を全て非表示にしていますが、レイアウトは残っています。

完全に非表示にするには、display:noneとなります。

どれもHTMLのソースコードを見れば、記述は存在します。

テーブル（表）とvisibility: collapse

以下、非常に単純なテーブルがあります。

テーブルをそのまま表示

ソースは以下です。

<table>
 <tbody>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
  <tr>
   <td>4</td>
   <td>5</td>
   <td>6</td>
  </tr>
  <tr>
   <td>7</td>
   <td>8</td>
   <td>9</td>
  </tr>
 </tbody>
</table>

このテーブルの二行目に、visibility: collapseを設定すると、以下のようになります。

visibility: collapseを二行目に表示

<table>
 <tbody>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
  </tr>
  <tr style="visibility: collapse;">
   <td>4</td>
   <td>5</td>
   <td>6</td>
  </tr>
  <tr>
   <td>7</td>
   <td>8</td>
   <td>9</td>
  </tr>
 </tbody>
</table>

これの利点は、非表示にした行列のレイアウト要素は存在しているときと同じように計算されていることです。

JavaScriptなどでボタンをつけて、テーブルの行列を簡単に素早く非表示にできる、というのが便利です。

また、visibilityの設定なのに、display:noneのようにレイアウトも非表示にできます。

テーブルではこのvisibility collapseが便利です。