# display: none / visibility: hidden / opacity: 0 の違い

> 完全に消すならdisplay: none、領域を保ったまま隠すならvisibility: hidden、フェードで見せ隠しするならopacity（+visibility併用）。opacity: 0は見えないのにクリックできてしまう点に注意。

- URL: https://www.css-dictionary.com/compare/display-none-vs-visibility-vs-opacity/

## 比較表

| 観点 | 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）まで含めて依頼してください。

## それぞれの詳しい解説

- [display](https://www.css-dictionary.com/property/display.md)
- [visibility](https://www.css-dictionary.com/property/visibility.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)