「幅を指定したいのに動かない！」を解決。inline-blockの魔法を理解しよう
Web制作を学び始めると、誰もが一度は「あれ、`width`（幅）を指定したのに全然言うことを聞いてくれない……！」という壁にぶつかりますよね。
特にHTMLの要素には「インライン」と「ブロック」という性格の異なる2つのグループがあり、この特性を理解しないままCSSを書くと、まるで相性の悪いパズルのピースを無理やりはめ込もうとしているような苦戦を強いられてしまいます。
今日は、そんな悩めるあなたに、インラインの「身軽さ」とブロックの「意志の強さ」をいいとこ取りした、最強の切り札`display: inline-block`について、身近な例えを交えてお話ししますね。
—
そもそも「インライン」と「ブロック」って何？
まずは、この2つの性格を「カフェのメニュー」で例えてみましょう。
- インライン要素（`span`, `a`, `strong`など）：
これらは「ふせん」のようなものです。文章の中にペタペタと貼るように配置されます。横に並べられるけれど、幅や高さを自分勝手に指定することはできません。あくまで「中身の文字の大きさ」に合わせて形が変わる、控えめな存在です。
- ブロック要素（`div`, `p`, `h1`など）：
こちらは「おぼん（トレー）」です。一つ置くと、その行を独り占めして改行してしまいます。その代わり、幅や高さを自由自在に操れる、リーダー格の存在です。
「横に並べたいけれど、サイズも指定したい！」というワガママな要望を叶えてくれるのが、今回紹介する`inline-block`なんです。
—
inline-blockの正体：まさに「名札」
`inline-block`は、「横並びになれる」というインラインの特権と、「幅や高さを自由に設定できる」というブロックの特権をあわせ持った、まさに「名札」のような存在です。
名札は服（文章の流れ）の中に自然に馴染みますが、名札そのもののサイズはしっかり決まっていますよね？
実際にコードで見てみましょう
まずは、ただのインライン要素（`span`）がどういう挙動をするか、そして`inline-block`にするとどう変わるかを確認してみましょう。
ただのインライン
inline-block
ご覧の通り、`display: inline-block`を指定した方は、しっかりとしたサイズを持ちつつ、隣の要素と仲良く横並びになっていますよね。これなら、ボタンを並べたり、カード型のメニューを作ったりするときに大活躍します。
—
ここでつまずく！要注意ポイント
「よし、これで完璧！」と思ったあなたに、現場でよくある小さな罠を一つだけお伝えしておきます。
`inline-block`にした要素同士をHTMLで改行して書くと、要素の間にわずかな「隙間」ができてしまうことがあるんです。
これは、HTMLの「改行」や「スペース」を、ブラウザが「文字と文字の間のスペース」として認識してしまうためです。
もし隙間を消したい場合は、以下のいずれかの方法を試してみてください。
1. HTMLで要素同士を改行せずに、横一列に詰めて書く。
2. 親要素に `font-size: 0;` を指定して、見えないスペースを潰す。
最初は「なんで隙間ができるの！？」とびっくりするかもしれませんが、これはHTMLの仕組み上、仕方のないことなんです。大丈夫、解決策はちゃんとありますからね。
—
まとめ：怖がらなくて大丈夫！
`display: inline-block`は、レイアウトを組む際の「困った時の駆け込み寺」のような存在です。
- `span`や`a`のように、文字の流れの中に配置したい。
- でも、ボタンのようにしっかり幅や高さを確保したい。
そんな時は、迷わず `display: inline-block` を使ってみてください。最初は思い通りにいかなくても、一つずつパズルを組むようにCSSを調整していけば、必ず理想のレイアウトが作れるようになります。
Web制作は、こうした小さな「あれ、おかしいな？」を一つずつ解決していく積み重ねです。焦らず、楽しみながらコーディングしてみてくださいね。応援しています！
コメント