Webサイトのレイアウトを調整するうえで、displayプロパティは非常に重要な役割を果たします。その中でも「inline-block」は、「ブロック要素のようにサイズを指定できる」かつ「インライン要素のように横並びに配置できる」という便利な特性を持っています。しかし、その使い方や挙動に戸惑う方も少なくありません。この記事では、display: inline-blockの基本から実践的な使い方、注意点までを初心者にもわかりやすく解説していきます。
CSSのdisplayプロパティは、HTML要素の表示形式を指定するものです。基本的には以下の3つの種類があります。
block: ブロックレベル要素（例：<div>, <p>など）で、縦に積み重なります。幅・高さの指定が可能です。inline: インライン要素（例：<span>, <a>など）で、横に並びますが、幅・高さを自由に指定できません。inline-block: インラインとブロックの「いいとこ取り」をした形式です。inline-blockは、インライン要素のように横並びでありながら、ブロック要素のように幅や高さを持てる特徴があります。
まずは、基本的なinline-blockの使い方を見てみましょう。
<style>
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
この例では、3つの.box要素が横並びに表示されます。これはinline-blockが「横並び」かつ「サイズ指定可能」だからです。
ここで、blockとinline-blockの違いを明確にしておきましょう。
| 特性 | block | inline-block |
|---|---|---|
| 横並び | × 縦に積まれる | ○ 横に並ぶ |
| 幅・高さの指定 | ○ 可能 | ○ 可能 |
| マージンの扱い | ○ 上下左右指定可 | ○ 上下左右指定可 |
| テキストとの扱い | × 独立して配置 | ○ 行内と同じ扱いになる |
特にレイアウトを細かく調整したいときには、inline-blockの特性を活かすことで美しい配置が実現できます。
<style>
nav a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
background-color: #f0f0f0;
margin-right: 5px;
}
</style>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
ナビゲーションメニューを横に並べたいとき、inline-blockが非常に便利です。
<style>
.card {
display: inline-block;
width: 200px;
height: 150px;
background-color: #fff0f0;
margin: 10px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
</style>
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
グリッドレイアウトを作るまでもない簡単な横並びカードなら、inline-blockで十分です。
inline-blockで横並びにしたとき、意図しない余白ができることがあります。これはHTML上の改行や空白がインライン扱いになるためです。
<div class="box"></div><div class="box"></div><div class="box"></div>
<style>
.wrapper {
font-size: 0;
}
.box {
font-size: 16px; /* 元に戻す */
}
</style>
<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
</div>
inline-blockでは、コンテンツによって幅が決まる場合があります。テキストを折り返したくない場合は、明示的にwidthやwhite-spaceを指定すると良いでしょう。
cssコピーする編集するwhite-space: nowrap;
近年では、flexboxが普及しており、横並びのレイアウトにはdisplay: flexを使うことが増えています。しかし、簡単な横並びであればinline-blockでも十分です。
| 機能・要件 | inline-block | flexbox |
|---|---|---|
| 簡易な横並び | ◎ | ◎ |
| 要素の中央揃え | △（工夫が必要） | ◎ |
| 要素の伸縮対応 | × | ◎ |
| 対応ブラウザ | 広範囲で安心 | IE10以降 |
状況によって使い分けましょう。
widthとheightを設定。inline-blockは要素が縮まないため、@mediaクエリなどで切り替えを工夫する。display: inline-blockは、インラインとブロックの特性を兼ね備えた便利なCSSプロパティです。特に複雑なレイアウトを必要としない場面での横並びにはとても使いやすく、軽量なコードで実装できます。
ただし、インライン特有の余白や整列の癖があるため、しっかりとした理解が必要です。FlexboxやGridとの違いを理解し、用途に応じて使い分けることで、より柔軟で美しいレイアウトが実現できるでしょう。