Display:noneとVisibility:hiddenの違いは？

Webページの要素を非表示にする際によく使われるCSSのプロパティに、「display: none;」と「visibility: hidden;」があります。どちらも要素を視覚的に非表示にすることができますが、両者には明確な違いがあります。この記事では、「display: none;」と「visibility: hidden;」の違いについて詳しく解説し、それぞれの使い分けについて具体的な例を交えて説明します。

display: none; とは？

「display: none;」は、要素を完全に非表示にするプロパティです。要素はページのレイアウトから完全に削除され、ブラウザは要素が存在しないかのように振る舞います。つまり、要素は画面上に表示されず、スペースも確保されません。また、JavaScriptで要素を取得することもできません。


<div class="example">
  このテキストは表示されます。
</div>

<style>
.example {
  display: none;
}
</style>

上記の例では、「example」クラスが適用されたdiv要素は「display: none;」が設定されているため、ブラウザ上には表示されません。また、JavaScriptで「document.querySelector('.example')」を実行しても、要素は取得できません。

visibility: hidden; とは？

「visibility: hidden;」は、要素を視覚的にのみ非表示にするプロパティです。要素はページのレイアウト上に存在し、スペースも確保されますが、画面上には表示されません。JavaScriptで要素を取得することは可能です。


<div class="example">
  このテキストは表示されません。
</div>

<style>
.example {
  visibility: hidden;
}
</style>

上記の例では、「example」クラスが適用されたdiv要素は「visibility: hidden;」が設定されているため、ブラウザ上には表示されません。しかし、要素はレイアウト上に存在し、スペースも確保されているため、JavaScriptで「document.querySelector('.example')」を実行すると、要素を取得することができます。

display: none; と visibility: hidden; の違いをまとめる

「display: none;」と「visibility: hidden;」の違いを以下の表にまとめます。

項目	display: none;	visibility: hidden;
表示	非表示	非表示
レイアウト上のスペース	確保されない	確保される
JavaScriptからのアクセス	不可	可能

使い分けのポイント

要素を完全に非表示にし、レイアウトにも影響を与えたくない場合は「display: none;」を使用します。例えば、モーダルウィンドウを閉じる際や、条件によって要素を表示・非表示を切り替える場合などに適しています。
要素を一時的に非表示にし、レイアウトは保持したい場合は「visibility: hidden;」を使用します。例えば、ローディングアニメーションを表示する際に、アニメーションが終わるまで要素を非表示にしておく場合などに適しています。

参考資料

関連QA

Q1. display: none; を JavaScript で設定するにはどうすれば良いですか？

A1. 要素の style プロパティに "display: none;" を設定することで、JavaScript から display: none; を設定することができます。


// 要素を取得
const element = document.querySelector('.example');

// display: none; を設定
element.style.display = 'none';

Q2. visibility: hidden; を設定した要素の子要素を表示するにはどうすれば良いですか？

A2. visibility: hidden; は子要素にも継承されるため、子要素のみを表示したい場合は、子要素に対して visibility: visible; を設定する必要があります。


<div class="parent">
  <div class="child">
    このテキストは表示されます。
  </div>
</div>

<style>
.parent {
  visibility: hidden;
}

.child {
  visibility: visible;
}
</style>

Q3. display: none; と visibility: hidden; のどちらを使えば良いか迷う場合は？

A3. 基本的には、要素を完全に非表示にしたい場合は display: none; を、一時的に非表示にしたい場合は visibility: hidden; を使用します。ただし、レイアウトへの影響やJavaScriptからのアクセスが必要かどうかなどを考慮して、適切な方を選択する必要があります。迷う場合は、両方のプロパティを試してみて、実際にどのように表示されるかを確認することをおすすめします。

その他の参考記事:jquery display 切り替え