CSS REFERENCE
レイアウト・構造
ー 要素の「表示形式」と「レイアウトの文脈」を決定する、CSSで最も重要なプロパティ。
display プロパティは、要素が生成する「ボックス」のタイプを制御し、その要素がどのように周囲と相互作用し、またその内部で子がどのようにレイアウトされるかを決定します。
Webデザインにおけるレイアウトの出発点であり、単純な横並び・縦並びの変更から、フレックスボックスやグリッドレイアウトといった高度な2次元レイアウトの有効化まで、その影響範囲は極めて広大です。
現代のWeb制作においては、単なる表示・非表示の切り替えに留まらず、要素に「レイアウトの文脈（Formatting Context）」を与えるためのスイッチとしての役割が主流となっています。
要素を横に並べたい（inline-block）、中身を柔軟に整列させたい（flex）、碁盤の目状に配置したい（grid）など、レイアウト構造の基礎を定義する全てのシーンで使用します。また、メニューの開閉（none）などの動的なUI制御にも不可欠です。
♿ display: none; を使用すると、視覚的に消えるだけでなく、スクリーンリーダーなどの支援技術からも完全に無視されます。
視覚的に隠しつつ、読み上げは維持したい場合は、opacity: 0; や position: absolute; による画面外への配置を検討してください。また、flex や grid を使う際は、コードの記述順と視覚的な表示順が乖離しすぎないよう注意が必要です。
📦 親要素に display: flex または grid を指定すると、直下の子要素は自動的に「フレックスアイテム」または「グリッドアイテム」となり、通常のブロック/インラインの挙動を失います。
また、inline-block を指定した要素は、外側に対してはインライン（横に並ぶ）として振る舞いながら、内側ではブロックのように width や height を受け付けるようになります。
| 値 / 関連 | 説明 |
|---|---|
block |
縦に積み重なり、親要素の幅いっぱいに広がる（<div>, <p> 等の初期値） |
inline |
文章の一部として横に並び、幅や高さの指定が効かない（<span>, <a> 等の初期値） |
inline-block |
横に並びながら、幅や高さ、上下の余白を指定できる |
flex / grid |
子要素に対して強力な整列・配置機能（Flexbox/Grid）を有効化する |
none |
要素を完全に削除し、領域も確保しない |
display: flex を親要素に指定することで、子要素を簡単に横並びにし、柔軟な整列を可能にします。
<div class="parent">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
</div>.parent {
display: flex;
gap: 10px;
}
.child {
padding: 10px;
background: #eee;
}インライン要素（<span> 等）に対して、display を変更せずに width や height を指定しても効果がありません。
<span>幅と高さが効かないテキスト</span>span {
/* display: block; 等がないと効かない */
width: 100px;
height: 100px;
}