皆さん、こんにちは！Webデザインの現場で日々奮闘されている皆さん、お疲れ様です。
今回は「Block and inline layout in normal flow」という、Webレイアウトの超基本テーマについてお話ししたいと思います。「今さら？」と思われた方もいるかもしれませんね。ですが、この基礎の基礎を深く理解しているかどうかが、複雑なレイアウトを組む際のデバッグ能力や、新しいCSS技術を使いこなす上での「土台」となります。
FlexboxやGridが主流の現代でも、各要素がノーマルフローでどのように振る舞うかを把握していなければ、意図しない余白やズレに悩まされ続けることになります。今回は、その「当たり前」の裏側にある「見えない力」に焦点を当てて、実務に役立つ視点でお話ししていきましょう。
ノーマルフロー、その「自然な流れ」を再確認
まず、ノーマルフローとは何か？これは、HTML文書が記述された順序通りに、ブラウザが要素を上から下、左から右へと配置していく「自然な流れ」のことです。CSSで特別な指定をしない限り、すべての要素はこのノーマルフローに従って配置されます。
このノーマルフローの中で、要素は大きく分けて2つの表示形式（`display`プロパティの値）を持ちます。それがブロックレベル要素とインラインレベル要素です。
ブロックレベル要素：大地に根を張る存在
divやp、h1～h6、ul、liなどが代表的なブロックレベル要素です。彼らの特徴は以下の通り。
- 親要素の幅いっぱいに広がる：特に幅を指定しない場合、`width: auto`となり、親要素のコンテンツ領域の100%を占めます。まるで、その場に「ドン！」と居座るかのように、自分の領土を最大限に広げようとします。
- 常に改行される：前後に改行が入り、独立したブロックとして配置されます。
- 幅、高さ、マージン、パディングを自由に設定可能：まさに箱そのもの。
実務でよく遭遇するポイントとして、マージンの相殺（margin collapsing）があります。隣接する2つのブロック要素の垂直方向のマージンが重なる場合、大きい方のマージンだけが適用され、小さい方は「相殺」されて消滅します。例えば、1つ目のpタグに`margin-bottom: 20px;`、次のpタグに`margin-top: 30px;`と指定した場合、両者の間隔は`20px + 30px = 50px`ではなく、大きい方の`30px`となります。これは、文書の読みやすさを考慮したCSSの「お節介」とも言える振る舞いですが、意図しない余白の原因となるため、意識しておく必要があります。
「あれ、なんでこんなに余白が少ないんだろう？」と悩んだら、開発者ツールでマージンを確認してみてください。
インラインレベル要素：テキストに寄り添う、見えない力
a、span、em、strong、imgなどがインラインレベル要素の代表です。彼らはテキストの流れに沿って配置され、まるで言葉の粒のように、その場で隣り合って並びます。
- コンテンツの幅に依存：幅や高さは、その要素が持つコンテンツの量に依存します。
- 改行されない：ブロックレベル要素のように前後に改行は入りません。
- 垂直方向のマージンは無効：`margin-top`や`margin-bottom`は設定しても効きません。水平方向のマージン（`margin-left`, `margin-right`）は有効です。
- `width`や`height`も設定できない：これらはブロックレベル要素の特権です。
インライン要素のレイアウトで最も厄介なのが、垂直方向の整列です。例えば、テキストの横にアイコン画像を配置した際、「あれ、アイコンが少し下にずれてるぞ？」と感じたことはありませんか？これは、インライン要素が持つベースラインという概念が深く関係しています。
テキストは通常、行のベースラインに沿って配置されます。`img`要素もデフォルトではこのベースラインに揃えられようとしますが、テキストのフォントサイズや`line-height`によって、アイコンがテキストの下に沈んで見えてしまうことがあります。これを解決するのが`vertical-align`プロパティです。`vertical-align: middle;`を指定することで、テキストの中央に揃えることができます。
また、インライン要素を並べた際に、要素間に謎の隙間ができることがあります。これは、HTMLのソースコード上でインライン要素間に挿入された半角スペースや改行コードが、ブラウザによって「半角スペース1つ分」と解釈されるために発生します。例えば、`要素1 要素2`や、改行を挟んだ`要素1
要素2`のような場合です。CSSで`font-size: 0;`を親要素に指定したり、HTMLのコメントアウトで隙間を消したりと、様々なテクニックで対処されてきましたね。
`display: inline-block;`：ブロックとインラインのいいとこどり
ノーマルフローのレイアウトを語る上で欠かせないのが、`inline-block`です。これは、その名の通り、インラインレベル要素のように横並びになりながらも、ブロックレベル要素のように幅、高さ、マージン、パディング（上下左右全て）を設定できるという、非常に便利な表示形式です。
昔はこれを使って複雑な多段レイアウトを組むこともありましたが、今ではFlexboxやGridがその役割を担っています。しかし、それでも`inline-block`が活躍する場面は多々あります。
例えば、以下のようなケースです。
- ナビゲーションメニューの各項目を横並びにする（`li`要素など）
- アイコンとテキストを横並びにして、全体に`padding`や`border`を適用したい場合
- フォームのラベルと入力フィールドを横に並べつつ、それぞれに独立した余白やサイズを設定したい場合
`inline-block`は、その柔軟性から、今でもUIコンポーネントの細かな調整には非常に重宝されます。ただし、インライン要素であるため、前述の「謎の隙間」問題は発生しますので、注意が必要です。
まとめ：見えない力を理解し、自在に操る
Webレイアウトは、突き詰めれば「要素がどう配置されるか」というシンプルな問いに行き着きます。そして、その基本中の基本が、このノーマルフローにおけるブロックとインライン要素の振る舞いです。
もしレイアウトで「あれ？」と思った時は、まずその要素の`display`プロパティが何になっているか、開発者ツールで確認する癖をつけましょう。そして、ボーダーや背景色を一時的に設定して、要素の実際のサイズやマージン、パディングがどうなっているかを目視で確認するのも有効なデバッグ手法です。
FlexboxやGridといった強力なツールを使いこなすためにも、その土台となるノーマルフロー、そしてブロック・インライン要素の「見えない力」を理解し、自在に操れるようになることが、実務で一歩先のデザインを実現するための鍵となるでしょう。
それでは、また次回のブログでお会いしましょう！
コメント