インライン要素とブロックの「いいとこ取り」を極める：`display: inline-block`の深淵
フロントエンド開発の現場で、CSSの「レイアウト崩れ」に頭を抱えた経験は誰にでもあるはずです。特に、ボタンやアイコン、あるいは動的に生成されるタグリストを横並びにする際、`float`の時代から脱却し、現代的なCSSレイアウトに移行した今でも、`display: inline-block`は依然として強力な武器であり続けています。
「なぜインライン要素ではwidthが効かないのか？」「なぜブロック要素だと改行されてしまうのか？」
このモヤモヤを解消し、中級エンジニアとして「なんとなく」から「意図を持って使いこなす」段階へステップアップするための知見を共有しましょう。
—
1. なぜ「inline-block」が必要なのか：挙動の解剖学
HTMLの要素には、ブラウザの初期設定として「インライン（`inline`）」と「ブロック（`block`）」の特性が割り当てられています。
- インライン（a, span, strongなど）: テキストの一部として扱われるため、横並びにはなりますが、`width`や`height`を指定しても無視されます。また、上下の`margin`も期待通りに効きません。
- ブロック（div, p, sectionなど）: `width`や`height`、`margin`を完璧に制御できますが、強制的に改行され、親要素の横幅を占有してしまいます。
ここで登場するのが `display: inline-block` です。これは、「横並びになる」というインラインの特性を維持しつつ、「サイズや余白を指定できる」というブロックの特性を付与する、いわば両者のハイブリッド形態です。
ブラウザのレンダリングエンジンは、`inline-block`を持つ要素を「インライン要素と同じベースラインを持ちつつ、内部的にはブロックボックスとして描画する」という特殊な処理を行います。これが、UIコンポーネントを柔軟に配置する際の鍵となります。
—
2. 現場で直面する「あの隙間」の正体
`inline-block`を使っていて、最も多くのエンジニアが「バグか？」と疑うのが、要素間に現れる謎の隙間でしょう。
実はこれ、ブラウザがHTML上の「改行」や「スペース」を、テキストの一部である空白文字として解釈していることが原因です。コードの見た目を綺麗にするためにインデントを入れると、その分だけ隙間が生まれてしまうのです。
これを解決するための、現場でよく使われるテクニックを交えたサンプルコードを紹介します。
—
3. 使い分けのベストプラクティス：Flexboxとの境界線
「じゃあ、全部 `inline-block` でいいんじゃないか？」と思われるかもしれません。しかし、現代のフロントエンド開発では、Flexbox（`display: flex`）との使い分けが重要です。
- `display: inline-block` を選ぶべきケース:
- 文章の流れの中に、サイズ指定した画像やボタンをインラインで配置したい場合。
- 親要素がブロックレベルではなく、あくまでテキストの一部として振る舞う必要がある場合。
- CSS GridやFlexboxを使うほどではない、非常に単純な横並び。
- Flexbox を選ぶべきケース:
- 要素の「間隔（gap）」を制御したい場合（`gap`プロパティは神です）。
- 垂直方向の中央揃えなど、複雑な位置調整が必要な場合。
- 要素の順序（order）を動的に変えたい場合。
まとめ：道具としてのCSSを理解する
`inline-block`は古くからあるプロパティですが、その特性を深く理解しておくことは、複雑なレイアウトの崩れを最小限のコードで修正する「現場の対応力」に直結します。
特に`font-size: 0`を使った隙間の削除や、`vertical-align`による微調整は、レガシーなシステムからモダンなReactコンポーネントまで、どこでも応用が効く「引き出し」です。
技術は常に進化しますが、こうした基本の挙動を深く理解しているエンジニアこそが、複雑なUIを堅牢に実装できる「頼りがいのあるプロ」になれるのだと、私は確信しています。ぜひ、次の実装で意識的に使い分けてみてください。
コメント