比較記事一覧に戻る
display: none / visibility: hidden / opacity: 0 の違い
TL;DR — ひとことで言うと
完全に消すならdisplay: none、領域を保ったまま隠すならvisibility: hidden、フェードで見せ隠しするならopacity（+visibility併用）。opacity: 0は見えないのにクリックできてしまう点に注意。
比較表
| 観点 | display: none | visibility: hidden | opacity: 0 |
|---|---|---|---|
| レイアウト領域 | 消える（詰まる） | 残る（空白になる） | 残る |
| スクリーンリーダー | 読まれない | 読まれない | 読まれる |
| クリック/フォーカス | 不可 | 不可 | 可能（罠になりやすい） |
| アニメーション | 従来不可（現在はallow-discrete+@starting-styleで可能） | 離散的に切替（遅延切替に使える） | 滑らかにフェード可能 |
| 典型用途 | タブ・モーダルの非表示側 | レイアウトを保った出し入れ | フェード演出の一部 |
使い分けの指針
フェードアウトの定番は「opacityでフェード + visibilityを遅延で切替」のセットです（見えなくなった後にクリックも無効化）。モダンブラウザだけなら、display切替にtransition-behavior: allow-discreteと@starting-styleを使うCSSのみの実装も選べます。
🤖 AIがよくやる取り違え
AIはopacity: 0で「隠した」つもりのコードを出しがちですが、リンクやボタンが透明なまま押せてしまう事故につながります。操作不能にする指定（visibilityやpointer-events）まで含めて依頼してください。