Display
CSSレイアウトの最も基本的なプロパティで、要素がblock、inline、flex、gridなどどのように表示されるかを制御します。outer display type（要素自体のフロー内での振る舞い）とinner display type（子要素のレイアウト方式）の2つの役割を持ちます。CSSレイアウトを理解する上で最初に習得すべきプロパティです。
概要
CSSレイアウトの最も基本的なプロパティで、要素がblock、inline、flex、gridなどどのように表示されるかを制御します。outer display type（要素自体のフロー内での振る舞い）とinner display type（子要素のレイアウト方式）の2つの役割を持ちます。CSSレイアウトを理解する上で最初に習得すべきプロパティです。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
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パターンを使用してください。