ブロックレベル要素 vs インライン要素

要素のデフォルトの振る舞いを理解することは、ウェブページのレイアウトをより自在にコントロールするための第一歩です。

本章では、ブロックレベル要素 (Block-level elements) と インライン要素 (Inline elements) の基本概念について深く掘り下げます。これら2つの概念は、要素がドキュメントの「ノーマルフロー（ドキュメントフロー）」内でどのように配置され、互いにどのように作用し合うかを決定します。

これらの概念をマスターすることは、より複雑で美しいレイアウトを作成するための重要なステップとなります。

1. ブロックレベル要素 (Block-Level Elements)

ブロックレベル要素は、ウェブページ上に「コンテンツの塊（ブロック）」を作成することを目的としています。これらはドキュメントフロー内での挙動に影響を与える特定の定義を持っています。

1.1 ブロックレベル要素の主な特徴

• 利用可能な全幅を占有する: デフォルトでは、ブロックレベル要素は親コンテナの幅いっぱいに広がります。
• 新しい行から開始される: 各ブロックレベル要素は新しい行から始まり、垂直方向に積み重なるコンテンツを形成します。
• width と height プロパティを遵守する: ブロックレベル要素には、明示的に width（幅）と height（高さ）を設定できます。
• 全方向のマージンとパディングを持つ: ブロックレベル要素の上下左右すべての方向に margin（外辺余白）と padding（内辺余白）を適用できます。
• インライン要素や他のブロックレベル要素を内包できる: ブロックレベル要素は、他のブロックレベル要素やインライン要素を格納するコンテナとして機能します。

1.2 代表的なブロックレベル要素

以下は、頻繁に使用されるブロックレベル要素です。

• <div>: セマンティックな意味を持たない汎用コンテナ。スタイル適用やコンテンツのグループ化に使用されます。
• <p>: テキストの段落を表します。
• <h1> 〜 <h6>: 異なるレベルの見出しを表します。<h1> が最も重要で、<h6> が最も下位です。
• <form>: ユーザー入力のためのHTMLフォームを表します。
• <header>: ドキュメントまたはセクションの導入的コンテンツを表します。
• <footer>: ドキュメントまたはセクションのフッター内容を表します。
• <section>: コンテンツのテーマ別グループを表します。
• <nav>: ナビゲーションリンクのセクションを表します。
• <article>: 独立したコンテンツの塊を表します。
• <aside>: 周囲のコンテンツと間接的な関連を持つセクション（サイドバーなど）を表します。
• <ol>: 順序付きリストを表します。
• <ul>: 順序なしリストを表します。
• <li>: リスト項目を表します。

1.3 ブロックレベル要素の具体例

以下のHTML構造を考えてみましょう。

<div>
  <h1>現代チュートリアルサイトへようこそ</h1>
  <p>これはテキストの段落です。</p>
</div>

この例では、<div>、<h1>、<p> 要素はすべてブロックレベル要素です。これらはそれぞれ親コンテナ（この場合は外側の <div>）の全幅を占有し、一つずつ垂直に積み重なります。

1.4 ブロックレベル要素の幅のコントロール

ブロックレベル要素はデフォルトで親要素の全幅を占有しますが、CSSの width プロパティを使用して幅を制限できます。

<div style="width: 500px;">
  <h1>現代チュートリアルサイトへようこそ</h1>
  <p>これはテキストの段落です。</p>
</div>

この場合、<div> 要素とその子要素（別途指定がない限り）は 500ピクセルの幅に制限されます。

1.5 ブロックレベル要素のマージンとパディング

Margins (マージン) は要素の外側にスペースを作り、Padding (パディング) は要素の内側にスペースを作ります。これらを使用して、ブロックレベル要素の間隔や視覚的な外観をコントロールできます。

<div style="margin: 20px; padding: 10px; border: 1px solid black;">
  <h1>現代チュートリアルサイトへようこそ</h1>
  <p>これはテキストの段落です。</p>
</div>

2. インライン要素 (Inline Elements)

ブロックレベル要素とは対照的に、インライン要素は周囲のテキスト内で流れるように配置されることを目的としています。これらはコンテンツを収めるのに必要な幅だけを占有します。

2.1 インライン要素の主な特徴

• 新しい行から開始されない: インライン要素は周囲のテキスト内に配置され、強制的に改行させることはありません。
• コンテンツに必要な幅のみを占有する: コンテンツを保持するために必要な水平スペースのみを占有します。
• 左右のマージンとパディングを遵守するが、上下は限定的: margin-left、margin-right、padding-left、padding-right は適用されますが、margin-top や margin-bottom は周囲の要素を押し退けることはありません（line-height プロパティの影響を受けます）。
• ブロックレベル要素を内包できない: インライン要素の中には、テキストまたは他のインライン要素のみを配置できます。
• width と height プロパティを無視する: インライン要素には直接 width や height を設定できません。サイズは内容（コンテンツ）によって決まります。

2.2 代表的なインライン要素

以下は、頻繁に使用されるインライン要素です。

• <span>: セマンティックな意味を持たない汎用インラインコンテナ。テキストの特定の部分にスタイルを適用する際に使用されます。
• <a>: ハイパーリンクを表します。
• <img>: 画像を表します。
• <strong>: 重要なテキスト（通常は太字）を表します。
• <em>: 強調するテキスト（通常は斜体）を表します。
• <code>: コンピュータコードの断片を表します。
• <br>: 改行を表します。

2.3 インライン要素の具体例

以下のHTML構造を考えてみましょう。

<p>これは段落内の <span>span</span> 要素です。</p>

この例では、<span> 要素はインライン要素です。段落テキストの中で流れ、強制的な改行を発生させません。

2.4 インライン要素のマージンとパディング

前述の通り、インライン要素は左右のマージンとパディングのみを正しく遵守します。

<p>これは段落内の <span style="margin: 0 20px; padding: 0 10px; border: 1px solid black;">span</span> 要素です。</p>

このコードでは、<span> 要素の左右に 20ピクセルのマージンと 10ピクセルのパディングが追加されますが、上下の指定はレイアウトに影響を与えません。

3. displayプロパティによる表示タイプの変更

CSSの display プロパティを使用すると、要素のデフォルトの表示挙動を変更できます。つまり、ブロックレベル要素をインライン要素のように振る舞わせたり、その逆も可能です。

3.1 display: block

この値は、要素のデフォルト設定に関わらず、ブロックレベル要素として振る舞わせます。

3.2 display: inline

この値は、要素をインライン要素として振る舞わせます。

3.3 display: inline-block

この値は inline と block のハイブリッドです。インライン要素のように周囲のテキストと並んで配置されますが、width や height の設定が可能になり、ブロックレベル要素と同様に全方向のマージンとパディングを遵守します。

3.4 表示タイプ変更の具体例

<div style="display: inline;">これは div です</div>

<span style="display: block;">これは span です</span>

<a style="display: inline-block; width: 100px; height: 50px; border: 1px solid black;">これはリンクです</a>

この例では：

• <div> 要素がインライン要素のように振る舞います。
• <span> 要素がブロックレベル要素のように振る舞います。
• <a> 要素がインラインブロック（inline-block）になり、周囲のテキストの中に留まりながらも、幅と高さを自由に設定できるようになります。

4. 実践的なユースケースとデモ

学んだ知識を定着させるために、実際の現場で使われるテクニックを見ていきましょう。

4.1 構成案 1：水平ナビゲーションメニュー

inline-block の最も一般的な使い道の一つは、水平なナビゲーションメニューの作成です。

<nav>
  <a href="#" style="display: inline-block; padding: 10px; text-decoration: none; color: black;">ホーム</a>
  <a href="#" style="display: inline-block; padding: 10px; text-decoration: none; color: black;">アバウト</a>
  <a href="#" style="display: inline-block; padding: 10px; text-decoration: none; color: black;">サービス</a>
  <a href="#" style="display: inline-block; padding: 10px; text-decoration: none; color: black;">コンタクト</a>
</nav>

<a> 要素を display: inline-block にすることで、横並びの状態を保ちつつ、クリック領域（パディング）やサイズを制御できるようになります。

4.2 構成案 2：Spanを使用したテキスト装飾

<span> は段落内の一部のテキストにだけスタイルを適用する際に非常に便利です。

<p>これは、<span style="color: red; font-weight: bold;">特定</span> のワードを強調した段落です。</p>

ここでは、<span> 要素を使って「特定」という言葉だけに赤色と太字を適用しています。

4.3 構成案 3：ブロックレベル要素による基本レイアウト

ブロックレベル要素はページ全体の骨組みを作るために使用されます。

<header style="background-color: #eee; padding: 20px;">
  <h1>現代チュートリアル</h1>
</header>

<nav style="background-color: #ddd; padding: 10px;">
  <a href="#">ホーム</a> |
  <a href="#">アバウト</a> |
  <a href="#">サービス</a> |
  <a href="#">コンタクト</a>
</nav>

<main style="padding: 20px;">
  <p>ここがページのメインコンテンツエリアです。</p>
</main>

<footer style="background-color: #eee; padding: 10px; text-align: center;">
  <p>© 2026 現代チュートリアル</p>
</footer>

<header>、<nav>、<main>、<footer> はすべてブロックレベル要素であり、これらを積み重ねることでウェブページの標準的な構造が形成されます。