Aerial view of a man using computer laptop on wooden table
Webサイト制作でよく使われるCSSのプロパティのひとつにdisplay: noneがあります。
一見シンプルに見えるこのプロパティですが、正しく使わないと意図しない表示トラブルやアクセシビリティの問題を引き起こすこともあります。
この記事では、display: noneの基本的な使い方から、類似のプロパティとの違い、よくある誤解や注意点まで、初心者にもわかりやすく丁寧に解説します。
これからHTMLとCSSを学ぶ方や、Web制作に携わる方の参考になれば幸いです。
CSSのdisplayプロパティは、要素の表示方法を指定するためのプロパティです。
その中でもdisplay: noneは、要素自体を画面上から完全に非表示にする設定です。
.hide-element {
display: none;
}
上記のCSSを適用した要素は、ブラウザ上に一切表示されず、スペースも取られません。まるでその要素が存在しないかのように扱われます。
HTMLでの適用例は以下のようになります。
<p class="hide-element">このテキストは表示されません</p>
この場合、「このテキストは表示されません」という文は、実際にブラウザ上では一切見えなくなります。
display: noneと混同されがちなのがvisibility: hiddenです。
どちらも要素を非表示にするためのCSSプロパティですが、その挙動には大きな違いがあります。
display: none：要素自体がDOM上には存在していても、表示領域から消え、スペースも取られないvisibility: hidden：見えなくなるが、スペースはそのまま保持される.hidden {
visibility: hidden;
}
<p class="hidden">これは見えないけどスペースはある</p>
<p>これは通常のテキストです</p>
上記のようなケースでは、1行目の<p>タグは見えなくなっても、その行の高さ分のスペースが表示されます。
一方でdisplay: noneならそのスペースも消えます。
display: noneは、主に以下のような場面で使用されます。
<button ><div id="box">このボックスを非表示にします</div>
上記では、ボタンをクリックすると#boxが非表示になります。
逆に表示させたい場合は、display: blockやdisplay: inlineなどで元に戻します。
display: noneの使用にはいくつか注意点があります。間違った使い方をすると、意図しないレイアウト崩れや、アクセシビリティの問題につながります。
スクリーンリーダー（視覚障害者のための読み上げソフト）では、display: noneの要素は基本的に読み上げ対象外になります。
情報として伝えるべき内容であれば、単に非表示にせずaria-hidden="true"や、JavaScriptで表示制御するなどの工夫が必要です。
display: noneは瞬時に要素を消すため、CSSのtransitionとの相性が悪いです。
ふわっと消したいなどの演出をする場合は、opacity: 0やvisibility: hiddenを使うほうが適しています。
レスポンシブデザインの実装でもdisplay: noneは活躍します。
特定の画面幅（スマホ・タブレット・PCなど）によって、表示・非表示を切り替えることで、ユーザーに最適なUIを提供できます。
@media screen and (max-width: 600px) {
.pc-only {
display: none;
}
}
上記のように書くことで、スマホなど画面幅が600px以下の場合は.pc-onlyクラスの要素が非表示になります。
場面によってはdisplay: none以外の方法が適していることもあります。
代表的な代替手段としては以下のようなものがあります。
opacity: 0;（透明にするが存在はする）visibility: hidden;（見えないがスペースは確保される）position: absolute; left: -9999px;（画面外に飛ばす）clip-pathを使って画面外へはみ出させるこれらをうまく使い分けることで、UIの表示制御をより柔軟に行うことができます。
display: noneは非常にシンプルで強力なCSSプロパティです。
ただし使い方を誤ると、アクセシビリティやレイアウト上の問題を引き起こすこともあります。
ポイントは以下の通りです。
正しく使いこなせば、Web制作の幅が大きく広がります。ぜひ今回の記事を参考に、display: noneをマスターしてみてください。