CSSでInline-blockを効果的に使う方法・使い方9選

はじめに

CSSで横並びレイアウトを作るとき、displayにinline-blockを使うと、テキストの流れに沿って要素を並べながらwidthやheightも扱えます。ナビゲーション、ボタン群、画像ギャラリー、簡易カードなど、小さなWebデザインで使いやすいCSSです。

ただし、Inline-blockには改行由来の余白、baseline揃え、高さの不一致といった注意点があります。初心者はCSS指定だけでなく、HTMLの空白や親要素の文字揃えも確認しましょう。

仕様の詳細は、MDNのdisplay解説とCSS Display Module Level 3で確認できます。実装時はdisplay: inline-block、vertical-align、text-align、font-sizeの関係を整理すると理解しやすいです。

CSS Inline-blockの基本的な概念

CSSのInline-blockは、要素を行内に置きながらブロック要素に近い寸法指定を可能にする表示形式です。spanやaのように横へ流れつつ、divのようにpadding、margin、borderを扱えます。

この性質により、メニュー項目、タグ風ラベル、横並びの画像、短いカード一覧を軽く組み立てられます。複雑な余白配分や折り返し制御が必要なら、CSSグリッド入門やFlexboxも候補になるのが基本です。

Inline-blockの使い方は小さな部品の整列に向いているのが基本です。ページ全体をCSS Gridで作り、局所的な横並びをInline-blockで補うと、初心者でもコードを追いやすいです。

Inline-blockの特徴と利点

Inline-blockの中心は、display: inline-blockというCSS指定です。要素は行内要素のように横へ並び、width、min-width、max-width、heightなども反映します。

行内レイアウトの一部なので、HTML内の改行や空白が要素間の隙間として現れることがあるのが目安です。この注意点を知らないと、CSSのmarginだけを見直して原因を見失いやすいです。

親要素のtext-align、子要素のvertical-align、空白対策のfont-size: 0をセットで考えると、対処法を選びやすくなります。

CSS Inline-blockの基本的な使い方

CSS Inline-blockの使い方は、横に並べたい子要素へdisplay: inline-blockを置き、縦位置と余白を調整する流れです。最小構成なら次のサンプルコードで要素が横に並びます。

.item {
  display: inline-block;
  width: 120px;
  padding: 12px;
  background-color: #eef2ff;
}

結果: 期待される表示では、.itemが横に並び、幅と内側余白を持つ箱として描画されますし、ここがポイントです。

このCSS指定は、blockの寸法制御とinlineの横並びを合わせた考え方です。初心者が表示形式の違いを学ぶ入口にもなります。

サンプルコード1：テキストと画像を横並びに配置する

画像と文章を横並びにする使い方は、ブログカードや商品説明でよく使いるのがポイントです。imgとpをInline-blockにし、vertical-align: topで上端をそろえますし、ここがポイントです。

<div class="container">
  <img src="image.jpg" alt="画像" class="inline-block media">
  <p class="inline-block text">ここにテキストが入りますが、これは押さえたい点です。</p>
</div>

結果: 期待される表示では、画像と文章が同じ行に並びます。

.inline-block {
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
.media {
  width: 120px;
}
.text {
  width: 280px;
}

結果: 期待される表示では、画像は120px幅、文章は280px幅になり、上端がそろいるのが一般的です。

vertical-alignを省くと下端基準に見える場合があります。テキスト量が多いWebデザインでは、スマホ幅で折り返す対処法も用意するのが目安です。

サンプルコード2：リストアイテムの横並び表示

リストを横並びにするCSSは、グローバルナビやカテゴリリンクに向いているのが現実的です。ulとliを保てるため、意味のあるHTMLを残しやすいです。

<ul class="horizontal-list">
  <li class="inline-block">ホーム</li>
  <li class="inline-block">製品情報</li>
  <li class="inline-block">会社概要</li>
  <li class="inline-block">お問い合わせ</li>
</ul>

結果: 期待される表示では、4件のリスト項目が横方向に並びます。

.horizontal-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.horizontal-list .inline-block {
  display: inline-block;
  margin-right: 20px;
}

結果: 期待される表示では、黒丸と初期余白が消え、項目間に20pxの余白が入りますし、これが一つの目安です。

リンクを入れる場合は、aへpaddingを持たせるとクリック領域を広げられます。CSSで引用や装飾も整えるなら、CSSを使った引用デザインの考え方も組み合わせやすいです。

サンプルコード3：複数列のレイアウトを作成する

複数列をInline-blockで作る使い方では、子要素の幅と外側余白の合計が親要素を超えないようにすると整理できるのがポイントです。計算が曖昧だと、最後の列だけ次の行へ落ちることがあります。

<div class="multi-column">
  <div class="inline-block column">カラム1</div>
  <div class="inline-block column">カラム2</div>
  <div class="inline-block column">カラム3</div>
</div>

結果: 期待される表示では、3つのカラムが同じ行に並びます。

.multi-column {
  text-align: center;
}
.column {
  display: inline-block;
  box-sizing: border-box;
  width: 30%;
  margin: 10px;
  padding: 16px;
  border: 1px solid #d1d5db;
}

結果: 期待される表示では、中央寄せされた3列の枠付きカラムになると理解できるのが一般的です。

box-sizing: border-boxを入れると、paddingとborderを幅に含めて計算できます。ただしmarginは外側に残るため、列数が増えるCSS設計ではGridも検討します。

CSS Inline-blockの応用的な使い方

CSS Inline-blockの応用的な使い方では、フォーム、レスポンシブ、簡易グリッドなど、横並び後の調整が中心です。基本のdisplayに@media、box-sizing、line-heightを合わせると破綻を減らせますし、ここがポイントです。

💡 Tips: Inline-blockは小さなUI部品の整列に向いていると理解できるのが現実的です。画面全体のレイアウトや複雑な並び替えでは、FlexboxやGridを候補に入れると整理しやすくなります。

サンプルコード4：フォーム要素のカスタムレイアウト

フォームでは、labelとinputを横に並べるだけでも読み取りやすさが変わりますが、これは押さえたい点です。入力欄の高さ、ラベルの文字数、スマホ幅の折り返しが注意点です。

<div class="form-group">
  <label class="inline-block form-label" for="name">名前：</label>
  <input id="name" type="text" class="inline-block form-control">
</div>

結果: 期待される表示では、ラベルと入力欄が横に並びます。

.form-group {
  margin-bottom: 10px;
}
.form-label,
.form-control {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.form-label {
  width: 80px;
}

結果: 期待される表示では、ラベル幅がそろい、入力欄の開始位置が整います。

ラベルが長い言語や項目名では折り返す可能性があると覚えるとよいでしょう。display: blockへ切り替えるメディアクエリを用意すると、初心者にも保守しやすい対処法になると整理できます。

サンプルコード5：レスポンシブデザインへの適用

レスポンシブなWebデザインでは、横並びを維持する幅と縦積みに変える幅を決めます。Inline-blockでも@mediaを使えば、PCでは3列、スマホでは1列へ切り替えられますし、これが一つの目安です。

<div class="responsive-layout">
  <div class="inline-block box">Box 1</div>
  <div class="inline-block box">Box 2</div>
  <div class="inline-block box">Box 3</div>
</div>

結果: 期待される表示では、画面幅が広いと3つのボックスが横に並びます。

.responsive-layout {
  text-align: center;
}
.box {
  display: inline-block;
  box-sizing: border-box;
  width: 30%;
  margin: 5px;
  padding: 20px;
}
@media screen and (max-width: 600px) {
  .box {
    display: block;
    width: 100%;
    margin: 0 0 10px;
  }
}

結果: 期待される表示では、600px以下の画面でボックスが縦に積み重なると言えるでしょう。

切り替えを入れると、狭い画面で文字や余白が窮屈になる問題を避けやすいです。単語の折り返しまで整えるなら、CSSのword-break解説も参考になります。

サンプルコード6：グリッドシステムの実装

簡易的なグリッドはInline-blockでも組めます。ただし本格的な二次元配置ならdisplay: gridが適するため、このCSSは小規模な一覧向けです。

<div class="grid-system">
  <div class="inline-block grid-item">アイテム1</div>
  <div class="inline-block grid-item">アイテム2</div>
  <div class="inline-block grid-item">アイテム3</div>
</div>

結果: 期待される表示では、3つのアイテムが横並びの簡易グリッドになると考えられますが、これは押さえたい点です。

.grid-system {
  text-align: center;
  font-size: 0;
}
.grid-item {
  display: inline-block;
  box-sizing: border-box;
  width: 33.333%;
  padding: 12px;
  font-size: 16px;
}

結果: 期待される表示では、空白の影響を抑えた3分割の横並びになります。

親要素のfont-size: 0で隙間を消し、子要素でfont-size: 16pxへ戻します。文字サイズを親から継承するCSS設計では副作用が出るため、注意点として残りますが、覚えておくと役立つでしょう。

Inline-blockを使ったよくあるエラーと対処法

Inline-blockのエラーは、CSSの構文ミスよりレイアウト仕様の誤解から起きがちです。特に余白、高さ、中央揃えは、初心者がつまずきやすい注意点です。

エラー例と解決策1：余白の問題

Inline-block要素の間に隙間が出る場合、HTML内の改行や半角スペースが原因になることがあります。行内要素として扱われる性質によるため、CSSのmarginだけを疑うと遠回りです。

<div class="container">
  <div class="inline-block">アイテム1</div><div class="inline-block">アイテム2</div><div class="inline-block">アイテム3</div>
</div>

結果: 期待される表示では、HTML上の改行由来の隙間が発生しにくくなるのがポイントです。

.container {
  font-size: 0;
}
.inline-block {
  display: inline-block;
  font-size: 16px;
}

結果: 期待される表示では、親の文字サイズを0にして空白幅を抑え、子要素の文字サイズだけ戻します。

この対処法は単純ですが、親要素内に通常のテキストがあると文字も消えたように見えます。適用範囲は.containerのような専用クラスに限定すると言えるでしょう。

エラー例と解決策2：高さの不一致

高さがずれて見える原因は、vertical-alignの初期値がbaselineである点です。画像、ボタン、テキストが混ざると、文字の基準線に合わせて配置され、上端がそろわないことがあると理解できます。

.inline-block {
  display: inline-block;
  vertical-align: top;
}

結果: 期待される表示では、Inline-block要素の上端がそろいます。

下端をそろえたいUIでは、vertical-align: bottomを使いるのが基本です。値を固定的に覚えるより、揃えたい基準を先に決めるほうが対処法として扱いやすいです。

エラー例と解決策3：中央揃えの問題

Inline-blockを中央に置くときは、子要素ではなく親要素にtext-align: centerを置きます。Inline-blockは行内の箱として扱われるため、margin: 0 autoだけでは意図どおりにならない場合があると覚えるとよいでしょう。

<div class="center-wrap">
  <div class="center-item">中央の要素</div>
</div>

結果: 期待される表示では、親要素の中に中央配置用の子要素が入りますし、ここを基本と考えるとよいでしょう。

.center-wrap {
  text-align: center;
}
.center-item {
  display: inline-block;
  width: 240px;
  text-align: left;
}

結果: 期待される表示では、箱自体は中央に置かれ、箱の中の文字は左揃えになります。

親のtext-alignは子孫の文字にも継承されます。子要素内の文章はtext-align: leftで戻すと、読みやすいWebデザインになるのが目安です。

Flexboxを使う対処法

中央揃えや等間隔配置が主目的なら、Flexboxのほうが短く書ける場合があると考えられます。Inline-blockに限定せず、要件に合うCSSを選ぶほうが保守しやすいです。

<div class="flex-container">
  <div class="flex-item">アイテム1</div>
  <div class="flex-item">アイテム2</div>
  <div class="flex-item">アイテム3</div>
</div>

結果: 期待される表示では、Flexbox用の親要素内に3つの項目が配置されます。

.flex-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.flex-item {
  padding: 10px;
}

結果: 期待される表示では、3つの項目が中央に集まり、gapで間隔が作られますが、これは押さえたい点です。

一方、古いコードの小修正や文章中の小さな部品ならInline-blockが簡潔です。CSSの使い方は、対象が部品かページ構造かで分けて考えますし、ここを基本と考えるとよいでしょう。

CSS Inline-blockの応用例

CSS Inline-blockの応用例は、画像ギャラリー、動的コンテンツ、タブUIのような小さな部品に集まります。横並びだけでなく、余白、折り返し、アクセシビリティの注意点も見ます。

サンプルコード7：画像ギャラリーの作成

画像ギャラリーでは、imgを横に並べつつ、画像幅を親要素に合わせますし、ここがポイントです。Inline-blockを使えば、少ないCSSでサムネイル一覧を作れますし、これが一つの目安です。

<div class="gallery">
  <img src="image1.jpg" alt="画像1" class="inline-block">
  <img src="image2.jpg" alt="画像2" class="inline-block">
  <img src="image3.jpg" alt="画像3" class="inline-block">
</div>

結果: 期待される表示では、3枚の画像が横方向に並ぶギャラリーになります。

.gallery {
  font-size: 0;
}
.gallery img {
  display: inline-block;
  box-sizing: border-box;
  width: 33.333%;
  padding: 10px;
  font-size: 16px;
}

結果: 期待される表示では、画像間の空白を抑えながら3分割のギャラリーになると理解できるのがポイントです。

画像にはaltを入れ、内容を伝える必要があります。装飾画像なら空のalt=""を検討し、商品や作品の画像では説明文を入れますが、覚えておくと役立つでしょう。

サンプルコード8：動的なコンテンツの配置

ニュース枠やおすすめ枠のように内容が入れ替わる領域でも、Inline-blockは使えるのが一般的です。要素数が変わっても破綻しにくいよう、幅と余白は控えめに決めます。

<div class="dynamic-content">
  <div class="inline-block panel">コンテンツ1</div>
  <div class="inline-block panel">コンテンツ2</div>
  <div class="inline-block panel">コンテンツ3</div>
</div>

結果: 期待される表示では、3つのコンテンツ枠が横に並びます。

.dynamic-content .panel {
  display: inline-block;
  box-sizing: border-box;
  width: 30%;
  margin: 10px;
  padding: 14px;
  background-color: #f9fafb;
}

結果: 期待される表示では、淡い背景を持つパネルが等幅で並びますが、これは押さえたい点です。

この応用例では、項目が4件以上になると折り返しが起きますし、ここを基本と考えるとよいでしょう。横一列に固定したいUIでは、overflow-xやFlexboxを検討します。

サンプルコード9：インタラクティブなUIコンポーネント

タブUIでは、タブ見出しをInline-blockで横に並べ、内容領域はCSSとJavaScriptで切り替えますし、これが一つの目安です。見た目はCSS、動作はaddEventListener()やclassListで管理します。

<div class="tabs">
  <button class="inline-block tab active" data-tab="one">タブ1</button>
  <button class="inline-block tab" data-tab="two">タブ2</button>
  <button class="inline-block tab" data-tab="three">タブ3</button>
</div>
<div class="tab-content">
  <div class="panel active" id="one">コンテンツ1</div>
  <div class="panel" id="two">コンテンツ2</div>
  <div class="panel" id="three">コンテンツ3</div>
</div>

結果: 期待される表示では、3つのタブと対応するコンテンツ領域が用意されます。

.tabs .tab {
  display: inline-block;
  padding: 10px 14px;
  margin-right: 5px;
  cursor: pointer;
}
.tab-content .panel {
  display: none;
  padding: 16px;
  border: 1px solid #d1d5db;
}
.tab-content .panel.active {
  display: block;
}

結果: 期待される表示では、選択中のパネルだけが表示されます。

document.querySelectorAll('.tab').forEach(function (tab) {
  tab.addEventListener('click', function () {
    document.querySelectorAll('.tab, .tab-content .panel').forEach(function (el) {
      el.classList.remove('active');
    });
    tab.classList.add('active');
    document.getElementById(tab.dataset.tab).classList.add('active');
  });
});

結果: 期待される動作では、クリックしたタブに対応するコンテンツだけへactiveクラスが付きます。

このサンプルコードは最小限の考え方です。公開UIでは、aria-selected、role="tab"、キーボード操作も設計すると扱いやすくなります。

エンジニアなら知っておくべき豆知識

Inline-blockは古くから使われるCSSの表示形式ですが、現在でも小さなUI部品では有効です。ただし、レイアウト全体の主役としてはFlexboxやGridとの使い分けが欠かせません。

ブラウザ間の互換性

現在の主要ブラウザでは、inline-block自体の対応で困る場面は多くありません。一方、組み合わせるgap、:focus-visible、aspect-ratioなどは対応状況を見る必要があります。

確認には、MDNのvertical-align解説やWHATWG HTML Living Standardが参考になります。公式ドキュメントでは、CSSの表示形式はHTMLの要素意味とは別に制御されるため、見た目だけで要素を選ばない姿勢が必要です。

パフォーマンスに関する考慮事項

Inline-blockを少数の部品に使う程度なら、通常はパフォーマンス上の問題になりにくいです。大量の要素に影、アニメーション、画像読み込みを重ねると、描画負荷は別要因で増えますが、覚えておくと役立つでしょう。

CSSだけで速度を語らず、画像サイズ、DOM量、box-shadow、transition、transformを含めて確認すると言えるでしょう。ゲージのような部品なら、CSSゲージ作成ガイドのように用途を絞った設計が扱いやすいです。

Flexboxとの比較

Flexboxは、主軸方向の整列、等間隔配置、縦方向の中央寄せに向いています。Inline-blockは、文章の流れに近い横並びや、古いコードの部分修正で扱いやすいCSSです。

ボタンを数個並べるだけならInline-blockでも十分です。要素間隔を自動調整したい、順序を変えたい、縦中央を安定させたい場合はdisplay: flexが現実的です。

設計時の注意点

Inline-blockを選ぶ前に、横並びの目的を確認します。小さな部品を並べたいのか、カード全体のレイアウトを制御したいのかで、CSSの選択は変わります。

文字量が不定なら折り返し、画像が含まれるなら縦位置、操作部品ならフォーカス表示が論点です。注意点を先に洗い出すと、後から対処法を継ぎ足す量を減らせますし、ここがポイントです。

まとめ

CSSのInline-blockは、要素を横に並べながら幅や高さを持たせたい場面で使える表示形式です。使い方の中心はdisplay: inline-blockですが、安定にはvertical-align、text-align、box-sizing、@mediaも関わりますし、ここがポイントです。

特徴を理解すると、テキストと画像の横並び、リストメニュー、フォーム、画像ギャラリー、タブUIなどの応用例へつなげられます。初心者は小さなサンプルコードから始め、余白や高さがずれたらHTMLの空白、baseline、親要素の文字揃えを順に確認するのが現実的です。

複雑なWebデザインではFlexboxやGridのほうが適する場面もあります。Inline-blockを万能のCSSとして扱わず、小さな横並びを軽く整える道具として使うと、コードの見通しを保ちやすいです。

関連記事

• CSSグリッド入門！完全マスターの12ステップ
• CSSにおけるquerySelector()の活用法10選！初心者からプロまで役立つCSSガイド
• CSSを使った引用デザインの作成とカスタマイズ方法7選
• CSSのword-breakを完全解説！初心者からプロまでの5つのコード例
• 【CSS】ゲージ作成の完全ガイド！7ステップで完全理解

※本記事は実在のエンジニア複数名で構成される Japanシーモア編集部が、AI支援を活用して作成・校正・公開しています。