「インライン要素って何だっけ？」で終わらせない。レイアウトの解像度を上げるdisplayの深淵
フロントエンドの現場で、「なぜかここだけ隙間ができる」「思った通りの高さにならない」という壁にぶつかったことはありませんか？その原因の多くは、実はHTMLのインライン要素とCSSの`display`プロパティの挙動に対する「なんとなく」の理解にあります。
`a`, `span`, `strong`といった要素は、CSSの歴史と共に「ただのテキストの入れ物」以上の役割を担うようになりました。今回は、ブラウザが裏側でこれらをどう処理しているのか、そして実務で「負けない」ためのコーディング術を解説します。
—
1. インライン要素の「素顔」とボックスモデルの限界
HTMLのインライン要素（`inline`）は、「コンテンツの幅に合わせて流れる」という特性を持っています。しかし、これが曲者です。
- 幅と高さの無視: インライン要素に対して`width`や`height`を指定しても、ブラウザは「そんなの知ったことか」と無視します。
- マージンの制限: `margin-top`や`margin-bottom`も効きません。これは、行間（line-height）を壊さないためのブラウザ側の「親心」とも言える仕様です。
- 不要な空白: コード上で改行を入れると、レンダリング時にテキストノードとして「空白」が挿入されます。これがレイアウト崩れの元凶の一つです。
2. displayプロパティが切り開く可能性
これらを解決するのが`display`プロパティの使い分けです。
inline-block：最強の妥協点
`inline-block`は、インラインの「横に並ぶ特性」と、ブロックの「サイズ調整・上下マージンが効く特性」のハイブリッドです。
- 使い所: ボタンの横並び、バッジの装飾、アイコン付きテキストなど。
inline-flex：モダンレイアウトの立役者
`inline-flex`は、インライン要素として配置しつつ、中身はFlexboxの強力な整列機能を使えます。
- 使い所: 縦方向に中央揃えしたいアイコン付きラベルなど。「親要素をブロックにしたくないが、中身は柔軟に配置したい」というワガママを叶えてくれます。
—
3. 実践：現場で即戦力になる「美しく並べる」コード
よくあるケースとして、「アイコンとテキストを縦中央揃えで、いい感じに並べる」という実装を例に挙げます。ここでは `inline-flex` を活用するのがベストプラクティスです。
—
4. プロが教える「ハマりどころ」と対策
最後に、実務で必ず直面する「ホワイトスペース問題」について触れておきます。
`inline`や`inline-block`を並べた際、ソースコード上の改行が「半角スペース」として表示されてしまうことがあります。これを解消する最もスマートな方法は、親要素に `font-size: 0;` を適用することです。
.button-group {
/ 子要素間の空白を消す魔法 /
font-size: 0;
}
.button-group > .btn {
font-size: 16px; / 子要素側でフォントサイズを戻す /
display: inline-block;
}
まとめ：賢い使い分けの指針
1. テキストの一部を装飾したいだけなら → `span`, `strong` (デフォルトの `inline` のまま)
2. 横並びでボックスとして制御したいなら → `inline-block`
3. 中身を中央揃えしたり複雑に配置したいなら → `inline-flex`
「なんとなく動く」から「仕様を理解して制御する」へ。この一歩を踏み出すだけで、あなたの書くCSSは劇的に堅牢になります。現場のレイアウト崩れに悩まされた時は、まずこの`display`の特性に立ち返ってみてください。
何か不明点があれば、またいつでも聞いてください。一緒に最高のUIを作り上げていきましょう！
コメント