zukucode
主にWEB関連の情報を技術メモとして発信しています。

CSS 要素を非表示にする方法

CSSで要素を非表示にする方法を紹介します。

要素を非表示にするには以下のように、要素に対してdisplay: none;のスタイルを指定します。

<div style="display: none;">
  表示されない
</div>
<div style="display: none;">
  表示されない
</div>
<div>
  表示される
</div>

要素のスペースを保持する方法

display: none;で非表示にすると、非表示になった要素の表示領域はなくなり、上記プレビューのように、他の要素が上に詰められる形になります。

表示スペースを確保した状態で、要素を非表示にするにはdisplay: none;の代わりに、visibility: hidden;を使用します。

<div style="visibility: hidden;">
  表示されない
</div>
<div style="visibility: hidden;">
  表示されない
</div>
<div>
  表示される
</div>


関連記事