はじめに
HTMLやCSSを学んでいると、「インライン要素」「ブロック要素」と並んで「インラインブロック要素（inline-block）」という用語を耳にすることがあります。
でも、「インライン」と「ブロック」の違いはわかっても、「インラインブロックって何？」「どうやって使うの？」と疑問に感じる方も多いのではないでしょうか。
今回はインラインブロック要素の特徴、使い方、他の要素との違い、使い分けのポイントについて解説します。
インラインブロック要素とは
インラインブロック要素（inline-block要素）とは、
「インライン要素のように同じ行に並ぶ」 ＋ 「ブロック要素のように幅や高さを指定できる」
という、両方の特徴を併せ持つ要素です。
デフォルトのHTMLタグでは<img>や<button>などが該当し、
また、CSSのdisplay: inline-block;を使えば任意の要素をインラインブロック要素として振る舞わせることができます。
タグ例
<img>：画像
<button>：ボタン
<input>：フォーム入力欄
CSSでdisplay: inline-block;を指定した要素
<span style="display: inline-block; width: 100px; height: 50px; background: #FCBB76;">
inline-block
</span>
<button style="width: 150px; height: 150px; background: #FCBB76;">送信</button>
インラインブロック要素では親要素いっぱいまで広がらないにも関わらず、幅は自分で自由に設定できるという特徴があります。
他の要素との違い
インラインブロック要素・インライン要素・ブロック要素の違いは以下の通りです。
| 特徴 | インライン要素 | ブロック要素 | インラインブロック要素 |
|---|---|---|---|
| 同じ行に並ぶ | 〇 | ×（改行される） | 〇 |
| 幅・高さの指定 | ×（基本不可） | 〇 | 〇 |
| 要素の例 |
<span>, <a>
|
<div>, <p>
|
<img>, <button>
|
| 横並びのレイアウト | × *1 | × | 〇 |
*1 横並びにはなるが横並びでレイアウトを組んだりデザインするのは難しい
使い分け・活用例
使い分けのポイント
-
インラインブロック要素を使うと便利な場面
-
横並びにしたいけれど、高さや幅も指定したい場合
-
レイアウトを柔軟に調整したい場合
インライン要素との違い
幅・高さを指定したい場合はインラインブロックを選択
ブロック要素との違い
横並びにしたい場合はインラインブロックを選択
実践例
ボタンを横並び＋サイズ指定
<button style="width: 120px; height: 40px; background-color: #FCBB76;">OK</button>
<button style="width: 120px; height: 40px; background-color: #FCBB76;">キャンセル</button>
複数のボックスを横並びに配置
<div style="display: inline-block; width: 100px; height: 100px; background: #f0a;">
ボックス1
</div>
<div style="display: inline-block; width: 100px; height: 100px; background: #0af;">
ボックス2
</div>
注意点
インラインブロック要素同士の間に「半角スペース」「改行」があると、隙間（余白）ができる ので、隙間をなくしたい場合はHTMLを工夫するか、CSSでマイナスマージンを使うなどの調整が必要です。
フレックスボックスやグリッドの登場により、レイアウト方法の選択肢は増えましたが、ちょっとした横並びレイアウトには今でもよく使われます。
ただし、昨今のWebデザインでは横並びと言えばインラインブロックではなくフレックスボックスが主流です。
最後に
インラインブロック要素は、インライン要素とブロック要素の いいとこ取り ができる便利な表示方法です。
「要素を横並びにしつつ、幅や高さも指定したい」―そんなときにぜひ活用してみてください。