display:none; はCSSで最もよく使われるプロパティのひとつです。画面上から要素を完全に消すことができ、レイアウトにも残りません。本記事ではdisplay:none;の基本から、visibility:hiddenとの違い、活用シーンまでわかりやすく解説します。
display:none;の基本とは
display:none; はCSSで要素を完全に非表示にする指定です。
例：
<p class="hidden">この文章は非表示になります</p>.hidden {
display: none;
}この場合、ブラウザには <p> タグが存在しないかのように扱われ、画面上には何も表示されません。
display:none;の特徴
- 要素自体が消える
単なる透明化ではなく、レイアウトからも削除されます。 - DOMには残っている
ソースコード上では存在しており、JavaScriptで再表示可能です。 - SEO上の扱いに注意
不要にテキストを隠すと検索エンジンからペナルティを受ける可能性があります。
再表示する方法
非表示にした要素を再度表示させるには、display の値を戻します。
.hidden {
display: none;
}
.show {
display: block; /* インライン要素なら inline に */
}
JavaScriptでの切り替え例：
document.querySelector(".hidden").style.display = "block";
display:none;とvisibility:hidden;の違い
- display:none;
要素が完全に消え、スペースも残りません。 - visibility:hidden;
要素は透明になり見えませんが、スペースは残ります。
よくある活用シーン
- タブ切り替えやアコーディオンメニュー
- ローディング中の非表示処理
- PCとスマホで表示要素を切り替えるレスポンシブデザイン
まとめ
display:none; はCSSで要素を完全に非表示にする強力な方法です。レイアウト調整や動的な表示切り替えに欠かせないプロパティですが、SEOの観点でも、乱用は避け、必要な場面で正しく活用することが重要です。
