インラインとブロックレベル

この章のゴールは、HTML の概念の 1 つである「インライン」と「ブロックレベル」を理解することです。

「インライン」と「ブロックレベル」の概念をおさえておくことで、Web ページが意図通りに表示されないときの原因調査の 1 つに役立てることができます。

CSS の学習まで進めると「インライン」と「ブロックレベル」の他にも、似たような名前で「インラインブロック（inline-block）」というものが出てきますが、

ここでは HTML の「インライン（inline）」「ブロックレベル（block-level）」の話だけをします。

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

以前、「要素とは」の中で、HTML には数多くの要素があるという説明をしました。

数多くある要素の中でも、Web ブラウザ上の表示で使う要素（body 要素の中に記述する HTML 要素）の例として、これまで以下の要素を取り上げてきました。

h1 要素
p 要素
img 要素
a 要素

これらの要素は、大きく分けると「インライン要素」と「ブロックレベル要素」の２つに分けることができます。

上記４つの要素を「インライン要素」と「ブロックレベル要素」に分けると次のようになります。

インライン要素: img、a
ブロックレベル要素: h1、p

それではもう少し具体的に「インライン要素」と「ブロックレベル要素」でどのように動作が変わってくるか、サンプルコードと画像を使ってイメージが付くように話を進めていきます。

先ほどの例（h1, p, img, a）のように、要素によって「インライン要素」と「ブロックレベル要素」は異なってきます。

「どの要素がブロックレベル要素なのか？」「どの要素がインライン要素なのか？」と知りたい場合は、いつも紹介しているドキュメント「MDN」で確認できます。（以下の MDN のリンク先を参照）

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

ただ、これも繰り返しになりますが「ブロックレベル要素」「インライン要素」の暗記は推奨しません。（単純に数が膨大なため、暗記で覚えようとするのは現実的ではない）

様々な要素を調べて使っていくうちに、自然と「ブロックレベル要素」「インライン要素」というのがイメージつくようになります。

仮に、どちらの要素かわからなかったり、忘れてしまったとしても、先ほど共有した MDN のドキュメントページを参考にすれば答えが書いてあるので、必要に応じて参照すれば良いです。

サンプルコードと画像で動作の違いを理解する

基本ルールを覚える

まず最初に以下の 2 つを念頭に置いてから、後述するサンプルコードと画像をご覧ください。

ブロックレベル要素: ページ幅全体に広がる
インライン要素: 表示内容の幅だけを取る

現時点では上記の２つの意味がよくわからなくても OK です。

サンプルコードと表示結果の画像

まずは以下のサンプルコードと、サンプルコードの表示結果である画像をご確認ください。

「ブロックレベル要素」と「インライン要素」の動作の違いを見た目でわかりやすくするために、各要素に背景色を付けています。

背景色を付けている部分はサンプルコードの７〜２６行目になりますが、こちらは CSS の内容になってくるので、詳しくは３日目以降の CSS の章で改めて解説します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        background-color: lightgreen;
      }
      h2 {
        background-color: cyan;
      }
      p {
        background-color: pink;
      }
      div {
        background-color: gray;
      }
      a {
        background-color: yellow;
      }
      img {
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <h1>インラインとブロックレベル</h1>
    <p>
      インライン要素の詳細は「<a
        href="https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements"
        >こちら</a
      >」のドキュメントを参照
    </p>
    <p>
      ブロックレベル要素の詳細は「<a
        href="https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements"
        >こちら</a
      >」のドキュメントを参照
    </p>
    <h2>ブロックレベル要素で囲まれていない画像</h2>
    <img
      width="30%"
      src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
      alt="HTML&CSS速習教室"
    />
    <img
      width="30%"
      src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
      alt="HTML&CSS速習教室"
    />
    <img
      width="30%"
      src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
      alt="HTML&CSS速習教室"
    />
    <h2>ブロックレベル要素で1個ずつ囲まれている画像</h2>
    <div>
      <img
        width="30%"
        src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
        alt="HTML&CSS速習教室"
      />
    </div>
    <p>
      <img
        width="30%"
        src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
        alt="HTML&CSS速習教室"
      />
    </p>
    <div>
      <img
        width="30%"
        src="https://html-css-guide-five.vercel.app/images/og-image-for-top.png"
        alt="HTML&CSS速習教室"
      />
    </div>
  </body>
</html>

画像をクリックすると別タブで画像が開きます。
↓

まずこのサンプルコードの body タグの中で記述されている各要素を「ブロックレベル要素」「インライン要素」のそれぞれに分類すると次のとおりになります。

ブロックレベル要素: h1, h2, p, div
インライン要素: a, img

h1 要素（ブロックレベル要素）の挙動確認

h1 要素はブロックレベル要素になります。

８〜１０行目で、h1 要素にlightgreen（明るめの緑）の背景色を付けています。

表示結果の画像を見ると h1 要素部分の「インラインとブロックレベル」と書いている部分だけでなく、ページの右端までlightgreenの背景色がついているのがわかります。

先ほどの「基本ルールを覚える」の中でも説明した「ブロックレベル要素: ページ幅全体に広がる」を思い出してください。

h1 要素のこの挙動は、ページ幅全体に広がっていることから「ブロックレベル要素」であることがわかります。

同様に、他のブロックレベル要素である「h2, p, div」要素も、ページの右端まで要素の表示領域が広がっていることがわかります。

a 要素（インライン要素）の挙動確認

では次に a 要素を見ていきましょう。

a 要素はインライン要素になります。

２０〜２２行目で、a 要素にyellow（黄色）の背景色を付けています。

表示結果の画像を見ると a 要素部分の「こちら」と書いている部分だけにyellowの背景色がついているのがわかります。

つまり、ページの右端まで広がるブロックレベル要素のときと異なり、インライン要素内のコンテンツの領域のみしか表示領域を持たないことがわかります。

先ほどの「基本ルールを覚える」の中でも説明した「インライン要素: 表示内容の幅だけを取る」を思い出してください。

a 要素のこの挙動は、要素内のコンテンツ領域しか幅を持たないことから「インライン要素」であることがわかります。

わかりづらいですが、同じインライン要素である「img」要素も、右端まで背景色が広がっていないことから「インライン要素」であることがわかります。（２３〜２５行目で img 要素の背景色をpurple（紫色）に指定していますが、紫色は画像からはみ出ていない。）

まとめ

今回は HTML の「ブロックレベル要素」と「インライン要素」の違いを解説しました。

２日目の HTML の内容は以上となります。

ここまでで「独学で進めるのに覚えておくべき HTML の基礎概念」を一通り解説したので、あとは以下のことを繰り返しながら学習を進める流れとなります。

いろんなコードを読む（テキスト教材、動画教材、GitHub、実運用されているコードなど）
実際にコードを書く
わからない部分が出てきたら都度調べる（最初の頃と比べて様々な知識を身につけているので、知識を流用してググれる幅も広がっているはず）
調べてもわからない場合は、師匠を見つけてサポートしてもらう

HTML の練習問題にチャレンジしたい場合は、Web 白熱教室の学習コンテンツ「HTML」の中で「エクササイズ」部分のリンクが有効になっているので、そちらで練習していただけたらと思います^^

HTML の「エクササイズ問題」の各リンクを以下にまとめておきます^^

「学習コンテンツ HTML」内の有効になっていないリンク先の解説スライド&解説動画や、各エクササイズの解答例&解説動画は「Front Hacks」で行っています。

HTML の解説動画以外に、「CSS、JavaScript、jQuery、Node.js、テスト、React、Vue」などをがっつり学習してみたいという場合は「Front Hacks の概要説明ページ」をご覧いただけたらと思います^^

学習状況をツイートする

HTML&CSS速習教室