inline-blockの使い方｜インライン要素とブロック要素の違いを解説

はじめに

CSSでレイアウトを構築する際、displayプロパティの理解は不可欠です。特に「display: inline-block;」は、要素を横並びにしつつ幅や高さを指定できるため、ナビゲーションメニューやカードレイアウトなどで広く利用されています。

しかし、ブロック要素やインライン要素との違いを正しく理解していないと、意図しない改行や余白が発生し、レイアウト崩れの原因になります。 本記事では、ブロック要素とインライン要素の基礎から、display: inline-block; の仕組みや注意点、実務での使い分けまでを体系的に解説します。基礎を固め、安定したレイアウト設計を実現しましょう。

ブロック要素とインライン要素の違い

ブロック要素の特徴

ブロック要素は、横幅いっぱいに広がり、前後に改行を伴う要素です。

主な特徴は次の通りです。

• デフォルトで幅が親要素いっぱいに広がる
• 前後に改行が入る
• width・height・margin・paddingが指定可能

レイアウトの大枠を構成する際に主に使用されます。

インライン要素の特徴

インライン要素は、文章の流れの中に組み込まれ、横幅は内容分だけを占有します。

主な特徴は次の通りです。

• 改行されない
• widthやheightが原則指定できない
• コンテンツ分の幅のみを持つ

テキスト装飾やリンクなど、部分的な装飾に使用されることが多い要素です。widthやheightが原則指定できない点がブロック要素との大きな違いです。

主なタグの一覧

以下に代表的なブロック要素とインライン要素を整理します。

displayプロパティは、これらの表示形式を変更できる点が重要です。

displayプロパティとは何か

display: block; の意味

display: block;を指定すると、要素をブロック要素として扱います。インライン要素に指定すると、改行されて幅いっぱいに広がります。

span {
  display: block;
}

レイアウト構造を明示的に制御したい場合に有効な指定です。

display: inline; の意味

display: inline;は、要素をインライン要素として扱います。ブロック要素に指定すると、改行されず横並びになります。

div {
  display: inline;
}

ただし、inlineにするとwidthやheightが指定できなくなるため注意が必要です。

display: inline-block; の位置づけ

display: inline-block;は、インライン要素のように横並びしながら、ブロック要素のように幅や高さを指定できる特性を持ちます。

以下の2つの特性を持ちます。

• 横並びにできる（inline的特性）
• widthやheightが指定可能（block的特性）

両者の特徴を併せ持つハイブリッドな表示形式です。

display: inline-block;の使い方

横並びレイアウトの実装例

<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>

.box {
  display: inline-block;
  width: 100px;
  height: 80px;
}

これにより、各.box要素は横に並びつつ、幅の指定が可能になります。ナビゲーションメニューやカード型レイアウトでよく利用されます。

flexbox登場以前は、横並びレイアウトの主流手法でした。

幅・高さ指定ができる理由

inline-blockは、表示形式としては「行内」に配置されますが、内部的には「ブロックコンテキスト」を持ちます。 そのため、widthやheight、margin、paddingなどの指定が可能です。

inlineでは制限される以下の指定が可能になります。

• width
• height
• margin（上下）
• padding

この特性が、レイアウト設計において大きな利点となります。

inline-blockの注意点

改行による余白問題

inline-blockを使用すると、HTML上の改行や空白が「文字」として扱われ、要素間に隙間が生じることがあります。

この隙間を解消するには、次の方法があります。

• HTMLを詰めて記述する
• 親要素にfont-size: 0;を指定する
• コメントアウトで空白を消す

実務では、この余白問題がトラブルの原因になるため注意が必要です。

vertical-alignとの関係

inline-block要素は、デフォルトでbaselineに揃います。そのため、縦位置が微妙にずれることがあります。

以下の指定で調整可能です。

.box {
  vertical-align: top;
}

vertical-alignと組み合わせることで、細かな縦位置調整が可能になります。

実務でのdisplayの使い分け

flexboxとの違い

現代のWeb制作では、flexboxが主流です。

.container {
  display: flex;
}

flexboxはレイアウト全体を制御できるため、複雑な横並びや中央揃えに適しています。一方、inline-blockは単純な横並びやテキスト内の配置に向いています。

どの場面でinline-blockを使うべきか

以下のような場面ではinline-blockが有効です。

• 小規模な横並び要素
• テキストとアイコンの並列配置
• 古いブラウザ対応が必要なケース

一方で、複雑なレスポンシブ設計ではflexboxやgridのほうが適しています。目的に応じて適切に使い分けることが重要です。

まとめ

display: inline-block;は、インライン要素とブロック要素の特性を併せ持つ便利な表示形式です。 しかし、その仕組みを理解せずに使用すると、改行による余白や縦位置のズレといった問題が発生します。

まずはブロック要素とインライン要素の違いを正確に理解し、そのうえでdisplayプロパティを使い分けることが重要です。

現代のWeb制作ではflexboxやgridも活用されますが、inline-blockの基礎を押さえておくことは、CSS理解を深めるうえで欠かせません。

より実践的なCSS設計やWeb制作スキルを体系的に学びたい方には、WEBMASTERSのプログラミングスクールがおすすめです。現場視点で整理されたカリキュラムで、実務に直結するスキルを習得できます。

正しい基礎理解が、安定したレイアウト設計への第一歩となります。