[CSS] 要素を非表示にする方法の違い｜display:none・visibility:hidden・opacity:0 を比較

Web制作では、「要素を見えなくしたい」という場面がよくあります。
しかし、CSSには

• display: none;
• visibility: hidden;
• opacity: 0;
• overflow: hidden;

など、見た目に関わるプロパティが複数存在します。

どれも「見えなくなる」ように見えますが、実際には挙動や用途が大きく異なります。
この記事では、それぞれの違いと適切な使い分けを解説します。

display: none; とは？

display: none; は要素を完全に非表示にするプロパティです。
要素はレイアウトから取り除かれ、他の要素がその場所を詰めて表示します。

.box {
  display: none;
}

特徴

• 要素は表示されない
• レイアウト上のスペースも消える
• クリックやフォーカスができない
• スクリーンリーダーにも認識されない

主な用途

• タブ切り替え
• アコーディオン
• 条件による表示切り替え

visibility: hidden; とは？

visibility: hidden; は要素を非表示にしますが、レイアウト上のスペースは維持されます。

.box {
  visibility: hidden;
}

特徴

• 要素は見えない
• レイアウト上のスペースは残る
• 通常はクリックやフォーカスができない
• レイアウト崩れを防げる

主な用途

• 一時的な表示切り替え
• レイアウトを維持したまま非表示にしたい場合

opacity: 0; とは？

opacity: 0; は要素を透明にするプロパティです。

.box {
  opacity: 0;
}

特徴

• 要素は透明になる
• レイアウト上のスペースは残る
• DOM上にも存在する
• クリックやフォーカスの対象になる
• アニメーションできる

主な用途

• フェードイン
• フェードアウト
• スクロールアニメーション

注意点

透明になっているだけなので、ユーザーには見えなくてもクリックできてしまいます。
必要に応じて、pointer-events: none; を併用します。

opacity: 0;
pointer-events: none;

overflow: hidden; とは？

overflow: hidden; は要素を非表示にするプロパティではありません。
要素の表示領域からはみ出した部分を隠すためのプロパティです。

.box {
  overflow: hidden;
}

特徴

• 要素自体は表示される
• レイアウトも維持される
• はみ出した部分のみ非表示になる
• スクロールバーが表示されない

主な用途

• スライダー
• カードUI
• 画像のトリミング
• レイアウト崩れ防止

比較表

プロパティ	DOMに存在	スペースを取る	クリック可	読み上げ対象	主な用途
display: none;	×	×	×	×	完全非表示
visibility: hidden;	◯	◯	×	△	レイアウトを維持したまま非表示
opacity: 0;	◯	◯	◯	◯	フェード演出
overflow: hidden;	◯	◯	◯	◯	はみ出し部分の非表示

ケース別の使い分け

完全に非表示にしたい
display: none;
要素をレイアウトごと消したい場合に使用します。

レイアウトは維持したい
visibility: hidden;
見えなくしたいが、要素の配置は崩したくない場合に使用します。

フェードイン・フェードアウトしたい
opacity: 0;
アニメーションを伴う表示切り替えに最適です。

はみ出し部分だけ隠したい
overflow: hidden;
表示範囲を制御したい場合に使用します。

注意点

opacity: 0; はクリックできる
透明になっているだけなので、リンクやボタンは操作可能です。
意図しないクリックを防ぐ場合は、pointer-events: none; を併用しましょう。

overflow: hidden; は子要素が切れる
ドロップダウンメニューやツールチップなどが途中で見切れる原因になることがあります。

display: none; はアニメーションできない
display はアニメーション対象にならないため、フェード演出には opacity を利用します。

まとめ

CSSには複数の「見えなくする方法」がありますが、それぞれ役割が異なります。

「見えなくする」という結果は同じでも、DOM・レイアウト・操作性への影響は大きく異なります。

目的に応じて適切なプロパティを選び、保守しやすく分かりやすいCSS設計を心掛けましょう。