Display
display は CSS のプロパティで、要素をブロックボックスとインラインボックスのどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。
正式には、 display プロパティは要素の内側と外側の表示型を設定します。外側の型は要素のフローレイアウトへの参加方法を設定し、内側の型は子要素のレイアウトを設定します。 display の値の一部は、それ自身の個別の仕様書で完全に定義されています。例えば、display: flex が宣言されたときに何が起こるかの詳細は、 CSS Flexible Box Model 仕様書で定義されています。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
block | 1 | 12 | 1 | 1 | 18 | 1 |
inline | 1 | 12 | 1 | 1 | 18 | 1 |
inline-block | 1 | 12 | 1 | 1 | 18 | 1 |
none | 1 | 12 | 1 | 1 | 18 | 1 |
none.option is hidden 非標準 `<option>` 要素に `display: none` を設定すると、その要素がドロップダウンから非表示になります。 | 1 | 79 | 1 | | 18 | |
注釈 1件
実装メモ
- Chrome 65 では、「display:none」が適用された「<iframe>」内の要素のレイアウト オブジェクトの作成が停止されました。
注釈 1件
実装メモ
- Chrome Android 65 では、「display:none」が適用された「<iframe>」内の要素のレイアウト オブジェクトの作成が停止されました。
基本構文
CSS
.block { display: block; }
.flex-container { display: flex; }
.grid-container { display: grid; }
.hidden { display: none; }ライブデモ
実務での使いどころ
-
レイアウトモデルの切り替え
コンテナ要素にdisplay: flexやdisplay: gridを設定し、子要素のレイアウト方式を柔軟に制御します。
注意点
- display: noneは要素をアクセシビリティツリーからも削除するため、視覚的に隠すだけの場合はvisibilityやclipを使用してください。
アクセシビリティ
- display: noneはスクリーンリーダーからも完全に非表示になります。読み上げは必要だが視覚的に隠したい場合はvisually-hiddenパターンを使用してください。