こんにちは！フロントエンドの世界へようこそ。
HTMLとCSSを学び始めると、必ずと言っていいほど「あれ？なんで指定した幅が効かないの？」「勝手に変な隙間ができるんだけど！」という壁にぶつかりますよね。実はこれ、多くの人が通る「インライン要素の洗礼」なんです。
今日は、そんなモヤモヤをスッキリ解消するために、`inline`（インライン）と `inline-block`（インラインブロック）という二つの「箱の性格」について、じっくりお話ししていきましょう。
—
1. 「文字」として振る舞う `inline` の性格
まず `` や `` タグなどで使われる `display: inline`。これは「文章の一部」として振る舞う要素です。
イメージしてみてください。本を読んでいるとき、文章の途中に無理やり大きな箱を置こうとしたら、行間が崩れてしまいますよね？ `inline` 要素は、まさに「文章の流れを乱さない、奥ゆかしい性格」の持ち主なんです。
- 横に並ぶ: テキストと同じように、左から右へ自然に並びます。
- 幅・高さが効かない: 「幅100pxにして！」と命令しても、「ごめんなさい、私は文章の一部なので、中身の文字の量に合わせてサイズが決まるんです」と無視されてしまいます。
- 上下のマージンも無視: `margin-top` や `bottom` を指定しても、行間が広がるだけで、要素そのものが押し出されることはありません。
まさに、「空気を読んで、その場に馴染もうとする人」のような存在ですね。
—
2. 「ワガママを言える」 `inline-block` の魅力
一方で、`inline-block` はどうでしょうか。名前の通り、`inline` の「横に並ぶ」という良さと、`block`（`div`など）の「幅や高さを自由に設定できる」という良さを、いいとこ取りした欲張りな存在です。
- 横に並ぶ: `inline` と同じく横に並びます。
- 幅・高さが指定できる: 好きなサイズに設定可能です。
- 余白も自由自在: `margin` や `padding` も、上下左右しっかり適用されます。
「横並びにしたいけれど、ボタンみたいにしっかりとしたサイズ感が欲しい！」というときは、迷わずこの子を選びましょう。
—
3. 実践！コードで挙動の違いを見てみよう
実際にコードを書いてみると、その違いが一目瞭然です。まずは自分のエディタにコピペして、ブラウザで眺めてみてください。
私はinline
私はinline
—
4. 初学者が一番泣かされる「謎の空白問題」
さて、最後に一つだけ注意点です。`inline` や `inline-block` を使うと、なぜか要素の間に「謎の隙間」ができることがあります。
実はこれ、コードを書くときに「改行」を入れているからなんです。HTMLは、タグとタグの間の改行やスペースを「半角スペース」として認識します。つまり、`inline-block` を横に並べたとき、改行コードが「半角スペース」として画面に表示されてしまっているだけなんです。
解決策はいたってシンプル！
- 親要素に `font-size: 0;` を設定して隙間を消す
- もしくは、HTML上のタグを詰めて書く（ちょっと見た目が悪いですが）
これを知っているだけで、「バグかな？」と焦る必要はもうありません。「ああ、余計な空白が入り込んでいるんだな」と、冷静に対処できるようになりますよ。
—
最後に：完璧を目指さなくて大丈夫！
CSSのレイアウトは、最初は本当にパズルみたいで難しいですよね。「なんで思うように動かないの！」とPCを閉じたくなる日もあるかもしれません。でも、それはあなたが「仕組みを理解しよう」と真剣に取り組んでいる証拠です。
まずは「`inline` は文章の一部」「`inline-block` は自由な箱」というざっくりとしたイメージさえ持っていれば、現場のコーディングはぐっと楽になります。
少しずつ、一緒に学んでいきましょうね。あなたの挑戦を、心から応援しています！
コメント