こんにちは！Web制作の海へようこそ。今日は、駆け出しの頃に誰もが一度は「あれ、なんでこうなるの？」と首を傾げてしまう、CSSのちょっとした魔法についてお話しします。
テーマは「`display: inline-block`」。
これ、名前の通り「インライン（行の中）」と「ブロック（箱）」のいいとこ取りをしたような存在なんです。でも、実際に使ってみると「おや？謎の隙間が空くぞ…？」と、多くの人が洗礼を受けるポイントでもあります。
大丈夫です。この「隙間の正体」と「魔法の使い方」さえ知れば、もうレイアウトで迷うことはありませんよ。一緒に紐解いていきましょう！
—
1. inline-blockって、どんな存在？
まず、身近な例え話から入りますね。
- インライン要素（`span`や`a`など）： 文中の文字のような存在です。「おにぎり」と「おにぎり」を並べても、その間に改行は入りませんよね。でも、幅や高さは自由に変えられません。
- ブロック要素（`div`など）： お弁当箱のような存在です。ドーンと場所を占有して、次の要素は下の行へ追い出されます。
そこで登場するのが`display: inline-block`です。
これは「おにぎりのように横に並べることはできるけれど、中身はしっかりお弁当箱として、高さや余白（マージン）を自由に操れる」という、まさにいいとこ取りのハイブリッド選手なんです。
使いどきはこんなとき
例えば、ボタンを横に並べたいとき。
「ボタンの幅をしっかり指定したいけれど、改行はしたくない」そんな時に`inline-block`は最強の武器になります。
.button {
display: inline-block; / 横に並ぶけど、箱としての性質を持つ /
width: 120px; / 幅を指定できる！ /
padding: 10px; / 上下の余白もバッチリ！ /
background: #ffcc00;
text-align: center;
}
—
2. 誰もが通る道、「謎の隙間」の正体
さて、意気揚々とコードを書いてブラウザで確認したとき、こんな現象に出くわしませんか？
「指定していないはずなのに、要素の間に数ピクセルの隙間がある……！」
これ、バグではありません。HTMLを書くとき、コードを読みやすくするために「改行」や「半角スペース」を入れますよね？ ブラウザは律儀に「あ、ここはHTML上で改行が入っているから、半角スペース1つ分空けておこうかな！」と解釈してしまうんです。
まさに、文章の単語と単語の間にスペースが入るのと同じ理屈。これが`inline-block`の唯一にして最大の「お茶目な弱点」です。
—
3. 「隙間問題」を華麗に解決する魔法のテクニック
この隙間を消す方法はいくつかありますが、現場で最もよく使われる、シンプルで確実な方法を2つ紹介しますね。
解決策A：親要素のフォントサイズを0にする
隙間の正体が「スペース」なら、スペースのサイズを0にしてしまえばいい。これが一番スマートです。
/ 親要素（囲っている箱）に設定 /
.container {
font-size: 0; / 文字サイズを0にする＝スペースも0になる /
}
/ 子要素（inline-blockしている要素）に設定 /
.item {
display: inline-block;
font-size: 16px; / 中身の文字サイズは戻してあげる /
}
解決策B：HTMLの書き方を工夫する
物理的に「改行させない」という荒技もあります。
※ちょっと見た目は不格好ですが、CSSを汚したくないときには有効です。
—
4. まとめ：怖がらなくて大丈夫！
`display: inline-block`は、レイアウトの幅をグッと広げてくれる心強い相棒です。
1. インラインのように横に並ぶ
2. ブロックのように幅や余白を操れる
3. 改行による隙間は「フォントサイズ0」で消す
この3つさえ覚えておけば、もう怖いものなしです。
最初は思い通りにいかないこともあるかもしれません。でも、Web制作は「ブラウザと対話するパズル」のようなもの。上手くいかなくて悩んだ分だけ、あなたの技術力は確実に積み上がっています。
焦らず、一つひとつ丁寧にコードを書いていきましょう。応援していますよ！
コメント