インライン要素をブロックのように振る舞わせたいときは？

CSS で display:block を指定してください。とはいえ意味的にブロック要素が正しいか再考することをおすすめします。

<span> と <div> はいつ使い分けるべきですか？

小さなテキスト装飾や文中要素は <span>、意味のあるグループやレイアウトの区切りは <div>（もしくはより意味的なタグ）を使ってください。

インライン要素とブロック要素の違い — HTML初心者でも理解できる完全ガイド

インライン要素とブロック要素の違いは、HTML を正しく書くための基本中の基本でありながら、初学者が躓きやすいポイントです。

そこで本稿では「インライン要素とブロック要素の違い」を中心に、定義・振る舞い・具体例とアクセシビリティの観点からの最適化・よくある間違いとその修正方法まで、段階的に解説いたします。

実務で使えるコード例や、学んだ内容を定着させる演習問題も用意しましたので、最後までお読みいただければ確実に理解が深まる構成にしています。

結論
理由
具体例
実務での判断基準
CSSでの振る舞い
コード例と解説
よくある誤解と修正方法
応用テクニック
実務例
パフォーマンスとメンテナンス
まとめ
演習問題（Point）
FAQ

結論

インライン要素とブロック要素の違いは、「表示上の流れ」と「幅と高さの扱い」にあります。

インライン要素は、行内でテキストと同じ流れに沿って配置され、幅は内容に依存します。

ブロック要素は、基本的に行を占有し、幅が可能な限り親要素いっぱいに広がる点が特徴です。

理由

HTMLのレンダリング規則に基づいています。

ブラウザは、DOMを解析して要素ごとにレイアウト方式を決定しますので、インライン要素はテキスト流の一部として扱われ、改行を自動的に生じさせません。

そのため横に並べて表示されやすい特徴があります。一方、ブロック要素は「箱（ボックス）」として扱われ、上下に余白（margin）が効きやすく、レイアウトの塊を形成します。

したがって、ページ構造や意味を明確にしたいときはブロック要素、文中に装飾や小さな構造が必要なときはインライン要素を選択すると良いです。

具体例

<span> や <a> は代表的なインライン要素で、文章中にリンクや強調を埋め込む用途に向いています。試しに以下のコードを観察してください。

<p>これは <span>強調</span> のテキストです。<a href="#">リンク</a> も同じ行に並びます。</p>

上記は同一行に並び、幅はテキスト量で決まります。これに対して下記のコードでは挙動が異なります。

<div>これはブロックの箱です。</div>
<section>セクションもブロック要素です。</section>

<div> や <section> はそれぞれ独立した行を占有し、通常は親の横幅いっぱいに広がります。

実務においては、レイアウトの骨組みにはブロック要素、細かなインライン装飾にはインライン要素を使うと保守性が高まります。

実務での判断基準

実務上の判断基準は「意味（セマンティクス）」と「レイアウト要件」です。

意味的に独立したまとまりを表す場合はブロック要素を選択してください。

逆に文中で一部を装飾するだけならインライン要素が適合します。

これによりHTMLが後でCSSやJavaScriptと連携しやすくなります。

CSSでの振る舞い

CSSにおいて display プロパティが重要です。

display:inline はインライン振る舞いを、display:block はブロック振る舞いを与えます。

画面上で「横並びにする」「縦に積む」などをコントロールする際は display を明示的に切り替える手法がよく使われます。

例えば、display:inline-block はインラインの流れの中で幅と高さが指定可能なハイブリッドで、横並びにしつつサイズ制御したい場合に重宝します。

コード例と解説

以下に典型的なパターンを示します。まず横並びにしたいカード要素を作るケースです。

コード
簡易プレビュー

<style>
.card { display:inline-block; width:200px; vertical-align:top; margin:10px; }
</style>
<div class="card">カードA</div>
<div class="card">カードB</div>

カードA

カードB

この例は display:inline-block を利用し、インラインの流れで並べながらサイズ指定を可能にしています。対照的に同じカードをブロックで並べると縦方向に積まれます。用途に応じて display を切り替えてください。

よくある誤解と修正方法

よくある誤解は「見た目で判断して要素を使い分けている」点です。

見た目だけで <div> にすべてまとめると、意味が不明瞭になり保守性やSEOで不利になります。

見た目はCSSで自由に変えられますから、意味に応じたタグ選択を優先してください。

応用テクニック

応用技として display の切り替えや Flexbox/Grid と組み合わせると柔軟なレイアウトが可能になります。

具体的には、親要素を display:flex にして子要素の並びを制御する際、子をインラインかブロックかで扱い方が変わります。

Flexbox はブロック・インラインを問わず扱えるため、より厳密なレイアウト制御が必要なときは活用すると便利です。

テクニック A：inline-block の活用（横並びかつサイズ制御）

コード
簡易プレビュー

<!-- inline-blockで横並びにしつつ幅指定を行う -->
<style>
  .tag { display:inline-block; padding:6px 10px; border-radius:4px; margin:4px; }
  .tag + .tag { /* 隣接するタグの間隔を確保 */ }
</style>

<p>
  テクニック:
  <span class="tag">HTML</span>
  <span class="tag">CSS</span>
  <span class="tag">JavaScript</span>
</p>

テクニック: HTML CSS JavaScript

ポイントはインラインの流れを保ちながら width / height の指定が可能になる点です。
小さな UI 要素（タグやバッジ）に向いています。

テクニック B：カード全体をリンクにする（<a> をブロック化）

コード
簡易プレビュー

<!-- カード全体をクリック可能にする場合 -->
<style>
  .card-link { display:block; text-decoration:none; color:inherit; border:1px solid #ddd; padding:12px; border-radius:6px; }
  .card-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
</style>

<a href="/product/123" class="card-link" aria-label="商品詳細を見る">
  <h3>商品名</h3>
  <p>短い説明文</p>
  <span class="price">¥2,480</span>
</a>

商品名

短い説明文

¥2,480

<a> は通常インラインですが、display:block にしてカード全体をリンク化するとユーザーに優しい作りになります。
アクセシビリティのために aria-label を付けると丁寧です。

テクニック C：Flexbox とインライン要素の併用（整列の改善）

コード
簡易プレビュー

<!-- 親をflexにすることで子の表示を安定させる -->
<style>
  .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  .row .meta { display:inline-flex; align-items:center; gap:6px; }
</style>

<div class="row">
  <h4>記事タイトル</h4>
  <div class="meta">
    <span class="author">著者</span>
    <span class="date">2026-01-24</span>
  </div>
</div>

記事タイトル

著者 2026-01-24

Flexbox を使うと行の揃え方や余白管理が容易になります。
子要素はインラインかブロックかに依らず柔軟に配置できます。

実務例

ECサイトの商品カード一覧を Flexbox で作ると考えます。

カード自体はブロック的な意味合い（まとまり）なので <article class=”product”> を使い、カード内の価格だけは文中で目立たせるため <span class=”price”> を用いると構造が明確になります。

こうするとCSSでの表示変更やJavaScriptによる操作が簡単になります。

コード
簡易プレビュー

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>商品一覧サンプル</title>
<style>
  /* グリッドでカードを並べる（レスポンシブ） */
  .products { display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap:16px; padding:16px; }
  article.product { border:1px solid #e6e6e6; border-radius:8px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
  .product img { width:100%; height:160px; object-fit:cover; display:block; }
  .product .body { padding:12px; flex:1 1 auto; }
  .product h3 { margin:0 0 8px 0; font-size:1.05rem; }
  .product p { margin:0 0 12px 0; color:#555; line-height:1.4; }
  .product .meta { display:flex; justify-content:space-between; align-items:center; gap:8px; }
  .price { font-weight:700; } /* price はインライン表現 */
  .btn { padding:8px 10px; border:0; background:#0070f3; color:#fff; border-radius:6px; cursor:pointer; }
  @media (max-width:600px){
    .product img { height:140px; }
  }
</style>
</head>
<body>

<section aria-labelledby="products-heading">
  <h2 id="products-heading">注目の商品</h2>

  <div class="products">
    <!-- 各カードは article（ブロック）で意味を担保 -->
    <article class="product">
      <img src="https://placehold.jp/400x300.png" alt="商品Aの写真">
      <div class="body">
        <h3>商品A</h3>
        <p>軽量で持ち運びに便利なモデルです。通勤や旅行に適しています。</p>
        <div class="meta">
          <span class="price">¥3,980</span>
          <button class="btn" aria-label="商品Aをカートに追加">カートに追加</button>
        </div>
      </div>
    </article>

    <article class="product">
      <img src="https://placehold.jp/400x300.png" alt="商品Bの写真">
      <div class="body">
        <h3>商品B</h3>
        <p>高性能バッテリー搭載で長時間使用が可能なモデルです。</p>
        <div class="meta">
          <span class="price">¥5,480</span>
          <button class="btn" aria-label="商品Bをカートに追加">カートに追加</button>
        </div>
      </div>
    </article>

    <!-- 他のカードも同様 -->
  </div>
</section>

</body>
</html>

商品一覧サンプル

注目の商品

商品A

軽量で持ち運びに便利なモデルです。通勤や旅行に適しています。

¥3,980

商品B

高性能バッテリー搭載で長時間使用が可能なモデルです。

¥5,480

実務上のポイント（補足）

カードは <article> として意味を与え、メタ情報（価格やボタン）は内部でインライン的に扱っています。
画像には必ず alt を設定しておき、スクリーンリーダーでの把握を助けます。
グリッドを使うことで横幅に応じた自動配置が可能です。
カード全体をリンクにしたい場合は、カード内の主要部分を <a> タグでラップし display:block を付与すると操作しやすくなります。

パフォーマンスとメンテナンス

正しい要素選択は後の保守性とパフォーマンス改善に寄与します。

無意味に多数の <div> を重ねるとDOMが深くなり、再描画コストが増す可能性があります。

意味のあるマークアップは読みやすく解析しやすいため、長期的なコスト削減になります。

まとめ

まとめますと、インライン要素は行内の小さな構造に用い、ブロック要素は意味的なまとまりやレイアウトの骨格に使用するのが正解です。

見た目はCSSで変えられるため、HTMLは「意味」を優先してマークアップしてください。

それが結果的にアクセシビリティとSEOにとって最良の選択となります。

演習問題（Point）

以下に演習問題を用意しました。解答例も続けて記載しますので、まずは自力で挑戦してください。

演習問題 1（インライン要素とブロック要素の違い）

次の HTML の出力が「同じ行に並ぶ」か「縦に並ぶ」かを答えてください。理由も簡潔に説明してください。

<p>まずは <span>強調</span> その後 <a href="#">リンク</a></p>

<div>箱1</div>
<div>箱2</div>

演習問題1の解答

<p> 内の <span> と <a> は同じ行に並びます。理由は span と a がインライン要素であり、行内の流れに沿って表示されるためです。
<div>箱1</div> と <div>箱2</div> は縦に並びます。理由は div がブロック要素であり、それぞれが行を占有するためです。

演習問題 2（display の切替）

次の CSS を適用した場合、<div class=”item”> はどのように表示されますか。説明してください。

<style>
.item { display:inline-block; width:150px; }
</style>
<div class="item">A</div><div class="item">B</div>

演習問題2の解答

display:inline-block を指定した .item は横に並びます。理由は inline の流れの中で幅が固定されるためです。複数の .item は改行されず横に連続して表示されますが、幅が足りない場合は折返されます。

演習問題 3（セマンティクス）

タイトルを太字かつ大きく表示したいだけです。次のうち適切なのはどれか選び、その理由を述べてください。
A. <b class=”title”>サイト名</b>
B. <h1 class=”title”>サイト名</h1>

演習問題3の解答

正解は B の <h1 class=”title”>サイト名</h1> です。見出しは意味的に重要な要素なので h1 を用いるべきであり、スタイル（太字・大きさ）は CSS で制御するほうがセマンティックかつアクセシブルです。

FAQ

Q インライン要素をブロックのように振る舞わせたいときは？: A

CSS で display:block を指定してください。とはいえ意味的にブロック要素が正しいか再考することをおすすめします。

Q <span> と <div> はいつ使い分けるべきですか？: A

小さなテキスト装飾や文中要素は <span>、意味のあるグループやレイアウトの区切りは <div>（もしくはより意味的なタグ）を使ってください。