display プロパティの役割とは？
HTMLの要素は、「ブロック要素」や「インライン要素」など、表示の性質がある。
display を使うと、それを自由に変更することができ、例えば：
- 要素を横に並べたい
- 要素の中に中央揃えをしたい
- 見えなくする
- グリッドやフレックスで 柔軟にレイアウト
…といったことが可能になる。
よく使う display の種類と使い分け
① block（ブロック要素）
- 特徴：幅100%を占めて改行される
- 例：<div>, <p>, <h1> など
display: block;
使い所：
- セクションを区切るとき
- 要素を縦に並べたいとき
② inline（インライン要素）
- 特徴：文章の中に並ぶように表示される（改行しない）
- 例：<span>, <a>, <strong> など
display: inline;
使い所：
- 文字の一部だけスタイルを変えたいとき（色・太字など）
注意：
- width, height, margin-top などが効かない
③inline-block
- 特徴：インラインのように横並びになるけど、サイズ指定（width/height）ができる
display: inline-block;
使い所：
- ボタンなど「横並び」かつ「サイズ調整」したいとき
④ none（非表示）
- 特徴：要素自体が画面から消える（DOMから除外されるように）
display: none;
使い所：
- タブ切り替え・モーダル表示の非表示状態など
ちなみに：
- visibility: hidden は見えないだけでスペースは残る
- display: none は完全に消える
⑤ flex（フレックスボックス）
- 特徴：要素を横並び・縦並びに整列できる柔軟な仕組み
display: flex;
使い所：
- ヘッダーの横並び
- コンテンツの**中央揃え（上下左右）**など
よく一緒に使うプロパティ：
justify-content: center; /* 横方向の揃え方 */
align-items: center; /* 縦方向の揃え方 */
flex-direction: row; /* 横並び */
⑥ grid（グリッドレイアウト）
特徴：2次元のレイアウトが得意（表のような構成）
display: grid;
使い所：
- 複雑なレイアウト（ブログの一覧、カード表示など）
一緒に使うプロパティ：
grid-template-columns: 1fr 1fr 1fr; /* 3列レイアウト */
gap: 16px; /* 要素の間隔 */
⑦ contents（中身だけ表示）
- 特徴：要素そのものは無視して中の子要素だけを表示
display: contents;
使い所：
- セマンティックな構造を残しつつ、見た目は親要素を消したいとき
注意：
- 一部のブラウザで不安定なこともある
⑧ table 関連（テーブル構造用）
- table, table-row, table-cell などテーブルレイアウトを自分で作りたいときに使う。
display: table;
display: table-row;
display: table-cell;
使い所：
- テーブルのような構成を CSS だけで再現したいとき（今はあまり使わない）
よくある使い分けの具体例
| 目的 | display |
|---|---|
| 横並びにしたい（レスポンシブ対応） | flex または inline-block |
| 要素を非表示にしたい | none |
| 要素を上下に並べたい | block（デフォルト） |
| ボタンなどのサイズ指定できる横並び | inline-block |
| グリッド表示（複数列）にしたい | grid |
| テキストの一部だけ強調したい | inline（または span） |
まとめ
- display は「この要素をどんな形で並べるか」を決めるスタイル。
- シンプルなレイアウトは block / inline / flex を覚えるだけでも十分。
- flex は超万能でよく使う。
- grid は2列以上の複雑レイアウトに便利。