[CSS] display: none;、opacity: 0;、overflow: hidden; の違いと使い分け

Web制作で「要素を見えなくしたい」と思ったとき、どのCSSプロパティを使いますか？
display: none;？ opacity: 0;？ overflow: hidden;？

これら3つはいずれも「見えなくなる」効果がありますが、意味や挙動はまったく異なります。
目的に合わないプロパティを使うと、ユーザー体験やSEO・アクセシビリティに悪影響を及ぼす可能性も。

この記事では、それぞれの違いと使い分けのコツを、特徴や実例とともにわかりやすく解説します。

display: none; とは？

display: none; は、要素を完全に非表示にするCSSプロパティです。

・表示領域から完全に削除され、DOMツリー上でも「存在しない」ように扱われます
・要素のサイズや影響もすべて消えるため、他の要素が詰めて表示されます
 

特徴

・要素は見えず、スペースも取りません
・マウスイベントやフォーカスも無効になります
・スクリーンリーダーにも読み上げられません

opacity: 0; とは？

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

・要素はDOM上に存在し、レイアウトにも影響します
・見た目は透明ですが、クリックや読み上げの対象にはなります
 

特徴

・要素は見えませんが、スペースは残ります
・マウス操作やキーボード操作が可能です
・アニメーションとの相性が良い

overflow: hidden; とは？

overflow: hidden; は、子要素がはみ出す部分を非表示にするプロパティです

・要素そのものは表示されており、サイズも維持されます
・見える範囲だけを制限する目的で使用されます
 

特徴

・要素自体は表示されています
・スクロールを許可せず、見える範囲を制御します
・スライダーやカードUIなど、視覚的なトリミングに便利

見た目は似てる？3つの違いを比較表で確認

「見えなくなる」効果は似ていますが、動作や意味には大きな違いがあります。
以下の表で、主な違いを整理しておきましょう。

プロパティ	DOMに存在	スペースを取る	クリック可	読み上げ対象	主な用途
display: none;	×	×	×	×	完全非表示、 要素を除外
opacity: 0;	◯	◯	◯	◯	フェード演出など
overflow: hidden;	◯	◯	◯ （範囲内）	◯	スクロール制限、 視覚トリミング

よくある使い方と注意点

完全に非表示にするなら display: none;

タブ切り替えや条件による要素の出し分けに適しています。
DOMから除外されるため、アクセス性もなくなります。
 

フェードイン・アウトには opacity: 0;

アニメーションで自然に表示・非表示を演出したいときに便利です。
display ではアニメーションできないため注意。
 

はみ出しを防ぎたいときは overflow: hidden;

レイアウト崩れや意図しないスクロールを防ぐのに役立ちます。
スライダーやモーダルの表示領域制限にもよく使われます。
 

注意点

・opacity: 0; で要素を隠しても、SEO上は「見えている」と認識される可能性があります
・overflow: hidden; を使うと、子要素のアニメーションやポップアップが途中で切れてしまうことがあります

まとめ：どれを使えばいい？ケース別おすすめ

それぞれの用途に合ったプロパティを選ぶことで、見た目だけでなく構造的にも正しいCSSが書けます。

ケース	おすすめプロパティ
完全にDOMから除外したい	display: none;
アニメーションでふわっと消したい	opacity: 0;
はみ出し部分だけ隠したい	overflow: hidden;

同じ「見えなくする」でも、意味や効果は異なります。
用途に合ったプロパティを選んで、ユーザーにもコードにもやさしいCSS設計を目指しましょう。