CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの「display: none」と「visibility: hidden」の違いを徹底解説

CSSで要素を非表示にする方法として、「display: none;」と「visibility: hidden;」の2つがよく使われます。どちらも要素を見えなくするプロパティですが、レイアウトへの影響が大きく異なるため、用途に応じた使い分けが重要です。本記事では、それぞれの特徴をコード例とともにわかりやすく解説します。

display: none; の特徴

display: none;は、要素をHTMLから削除することなく、画面上から完全に隠すためのプロパティです。非表示になった要素はスペースを占有しません。そのため、後続の要素が詰まって表示され、あたかも最初から存在しなかったかのようなレイアウトになります。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h3 {
            display: none;
         }
      </style>
   </head>
   <body>
      <h2>この見出しは表示されています</h2>
      <h3>これは非表示の見出しです</h3>
      <p>display: none; を使用しているため、非表示にした見出しはスペースを占有しません。</p>
   </body>
</html>

visibility: hidden; の特徴

visibility: hidden;も同様に要素を隠すプロパティですが、こちらはレイアウトに影響を与えます。つまり、要素を非表示にしても元のスペースはそのまま残り、周囲の要素の位置は変わりません。「見た目だけを消したいが、レイアウトは維持したい」という場合に有効です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         h3 {
            visibility: hidden;
         }
      </style>
   </head>
   <body>
      <h2>この見出しは表示されています</h2>
      <h3>これは非表示の見出しです</h3>
      <p>visibility: hidden; を使用しているため、非表示にしても見出しのスペースは残ります。</p>
   </body>
</html>

両者の違いのまとめ

  • display: none; … 要素を非表示にし、スペースも占有しない。レイアウト上から完全に除外される。
  • visibility: hidden; … 要素を非表示にするが、スペースは保持される。レイアウトは崩れない。

さらに実務上知っておきたい相違点として、次の点が挙げられます。visibility: hidden;は子要素に個別にvisibility: visible;を指定すれば再び表示できますが、display: none;の要素は親の設定を変更しない限り子要素だけを表示できません。また、display: none;は要素が描画対象から外れるため、表示・非表示を頻繁に切り替える場面ではvisibilityの方がスムーズに動作しやすいという特徴もあります。

このように、単に「見えなくする」だけでなく、レイアウトへの影響や再表示の挙動まで考慮して、目的に合ったプロパティを選択することが大切です。

  1. CSSのdisplay:none徹底解説！要素を非表示にする方法と実用サンプル

    CSS display:noneとは？ CSSのdisplay: none;は、指定した要素を画面上から完全に非表示にするためのプロパティ値です。Web開発では、特定の要素を一時的に隠したい場合や、JavaScriptと組み合わせて動的にコンテンツの表示・非表示を切り替えたい場面などで広く活用されています。 displayプロパティがnoneに設定された要素には、ボックス（レンダリング領域）が一切生成されません。そのため、子要素にblockやinline-blockなど他の値が設定されていたとしても、親要素ごとまとめて非表示になる点に注意が必要です。 また、似たような効果を持つvisibili

  2. CSSの疑似クラスと疑似要素の違いを徹底解説！コロンの数と使い分けのポイント

    CSSには「疑似クラス」と「疑似要素」という、名前がよく似た2つの機能があります。どちらもセレクターを拡張する仕組みですが、役割や書き方が異なります。本記事では、両者の違いをサンプルコード付きでわかりやすく解説します。 疑似クラス（Pseudo-Class）とは 疑似クラスは、:hover、:active、:last-childのように、セレクターの「状態」や「条件」を表すものです。マウスオーバー時のスタイル変更など、要素が特定の状態にあるときの見た目を制御できます。 疑似クラスはコロン1つ（:）で始まります。 CSS疑似クラスの基本構文は以下のとおりです。 :pseudo-class {