CSSのvisibilityで表示・非表示を制御する方法をわかりやすく解説

visibility プロパティは、要素が表示されるか非表示にするかを制御するためのプロパティです。このプロパティは要素の表示/非表示の切り替えを行いますが、display: none; と異なり、非表示になった場合でもレイアウトのスペースは維持されます。

visibility プロパティの値とその効果の一覧

• visible: 要素は表示されます。
• hidden: 要素は非表示になりますが、レイアウトには影響しません。
• collapse: テーブル要素に適用されると、その行や列が削除されたかのように見えます。他の要素には hidden と同じ効果です。

共通するCSSコード

.css-sample-container {
  border: 1px solid black;
  padding: 10px;
  margin-bottom: 20px;
  width: 300px;
}

.css-sample-content {
  font-size: 16px;
  color: black;
}
  

visibilityが効かない時の原因と対策

visibilityとdisplayの混同

visibilityは要素の表示状態を「見える」「見えない」に切り替えますが、display: none;と混同されることがあります。display: none;は要素自体をレイアウトから完全に削除しますが、visibility: hidden;は要素を非表示にするだけで、要素はレイアウト上に存在します。

対策: 要素を非表示にし、かつレイアウトを保持したい場合はvisibility: hidden;を、レイアウトごと削除したい場合はdisplay: none;を使用します。例えば、visibility: hidden;を使用して要素を非表示にしても、要素のスペースが残っていることを確認します。

visibility: visible

この値はデフォルトで、要素が通常通り表示されます。要素は隠されることなく、レイアウトに反映されます。visibleはデフォルト値であり、特別な効果はありません。

HTMLコード

<div class="css-sample-container css-sample-visible">
  <p class="css-sample-content">この要素は表示されています。</p>
</div>
  

CSSコード

.css-sample-visible {
  visibility: visible;
}
  

表示結果

visibility: hidden

この値を使用すると、要素は非表示になりますが、レイアウトにはスペースが残ります。要素は見えなくなりますが、他のコンテンツには影響を与えません。要素が非表示でもレイアウトにスペースが確保されるため、予期せぬレイアウトの空白が生じる可能性があります。

HTMLコード

<div class="css-sample-container css-sample-hidden">
  <p class="css-sample-content">この要素は非表示です。</p>
</div>
  

CSSコード

.css-sample-hidden {
  visibility: hidden;
}
  

表示結果

※以下、表示されません

visibility: collapse（テーブル要素の場合）

この値は主にテーブル要素に適用され、テーブルの行や列を非表示にして、それに対応するスペースを削除します。他の要素に対して使用すると、hiddenと同じ動作をします。collapseはテーブル要素でしか効果を発揮せず、他の要素ではhiddenと同じ効果になります。

HTMLコード

<table class="css-sample-container css-sample-collapse">
  <tr>
    <td>表示されるセル</td>
    <td class="td2">非表示のセル</td>
  </tr>
</table>
  

CSSコード

.css-sample-collapse td.td2 {
  visibility: collapse;
}
  

表示結果

まとめ

• visible: 要素が表示されます。
• hidden: 要素が非表示になりますが、レイアウトには影響を与えません。
• collapse: テーブル要素に対して使うと、行や列が削除されたように見えます。テーブル以外の要素では hidden と同じです。