Queryのdisplay:noneとは？

Webサイトを構築する上で、特定の要素を表示したり非表示にしたりする操作は頻繁に発生します。CSSの「display:none;」は、まさにこの目的のために用意されたプロパティで、HTML要素を完全に非表示にする効果があります。この記事では、「display:none;」について、その機能、使い方、注意点などを詳しく解説します。

display:none;の機能

「display:none;」は、HTML要素をWebページ上から視覚的にも構造的にも完全に消去するプロパティです。具体的には以下の2つの効果があります。

  • **視覚的な非表示:** 要素は画面上に表示されなくなります。まるで最初から存在しなかったかのように扱われます。
  • **構造的な非表示:** 非表示になった要素は、ページのレイアウト計算に影響を与えなくなります。つまり、他の要素は非表示要素があった場所を詰めるように配置されます。

例として、以下のHTMLとCSSを見てみましょう。


<div class="container">
  <p>表示される段落</p>
  <p class="hidden">非表示になる段落</p>
  <p>表示される段落</p>
</div>

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

この例では、「hidden」というクラスを持つ段落が「display:none;」によって非表示になっています。結果として、Webページ上には「表示される段落」の2つだけが表示され、非表示になった段落があった場所は他の段落によって埋められます。

display:none;の使い方

「display:none;」は、他のCSSプロパティと同様に、以下の3つの方法で使用できます。

使用方法 説明 例
インラインスタイル HTML要素のstyle属性に直接記述する方法 <p style="display:none;">非表示になる段落</p>
内部スタイルシート HTML文書内の<style>タグ内に記述する方法 <style> .hidden { display: none; } </style>
外部スタイルシート CSSファイルを作成し、HTML文書から読み込む方法 /* style.css */ .hidden { display: none; }
<link rel="stylesheet" href="style.css">

display:none;とvisibility:hidden;の違い

要素を非表示にするCSSプロパティには、「display:none;」以外にも「visibility:hidden;」があります。どちらも要素を非表示にするという点では同じですが、以下の点で異なります。

プロパティ 説明 レイアウトへの影響
display: none; 要素を完全に非表示にします。 非表示になった要素はレイアウト計算に含まれません。
visibility: hidden; 要素を透明にして非表示にします。 非表示になった要素はレイアウト計算に含まれます。つまり、要素があった場所は空白として残ります。

注意点

  • 「display:none;」は、JavaScriptなどを使って動的に要素の表示/非表示を切り替えることができます。しかし、頻繁な切り替えはパフォーマンスに影響を与える可能性があるため注意が必要です。
  • 「display:none;」は、スクリーンリーダーなどの支援技術を利用するユーザーにとっても要素が非表示になります。アクセシビリティに配慮した設計を行う場合は、注意が必要です。

参考資料

よくある質問

Q1: display:none;で非表示にした要素を再び表示するにはどうすれば良いですか？

A1: JavaScriptを使用するか、CSSのクラスを切り替えることで可能です。JavaScriptの場合は、要素のstyle.displayプロパティを'block'などに変更します。CSSの場合は、display:none;を指定したクラスを削除し、代わりにdisplay:block;などを指定したクラスを追加します。

Q2: display:none;とvisibility:hidden;どちらを使うべきですか？

A2: 基本的に、要素を完全に非表示にしたい場合は「display:none;」、要素の見た目は非表示にしたいがレイアウトは保持したい場合は「visibility:hidden;」を使用します。状況に応じて使い分けましょう。

Q3: display:none;はSEOに影響しますか？

A3: display:none;を使用したからといって、直接的にSEOに悪影響を与えることはありません。ただし、ユーザーにとって重要な情報を「display:none;」で非表示にしている場合、検索エンジンにコンテンツを正しく評価されない可能性があります。ユーザーと検索エンジンの両方に配慮したWebサイト設計を心がけましょう。

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