はじめに
HTMLとCSSを学ぶ上で、
「ブロックレベル要素とインライン要素の違い」
は理解しておくべき大切な内容です。
実際にこれらの違いについて調べてみると、
だいたい下表のようにまとめることができます。
| 比較項目 | ブロックレベル要素 | インライン要素 |
|---|---|---|
| 他の要素の格納 | できる | できない |
| サイズの指定 （高さと幅） |
できる | できない （内容に依存） |
| 余白の設定 （配置の調整） |
できる | 部分的にできる （余白の方向による） |
| 要素の前後の改行 | 入る | 入らない |
ここまではよく出てくるのですが、これだけを見ると、
- どうしてインライン要素ではサイズを指定できないのか
- なぜブロックレベル要素を使うと自動で改行が入るのか
といったそもそもの部分については理解することができません。
この記事はブロックレベル要素とインライン要素について、
- どうしてこのような性質を持つのか
- なぜこのような分類が必要なのか
を理解するために、ブロックレベル要素とインライン要素の概念に注目して書いた記事になります。
対象
- HTMLについて学び始めたものの、ブロックレベル要素とインライン要素がうまく理解できない初学者
- ブロックレベル要素とインライン要素について、自分なりにしっくりくる説明が見つかっていない方
実例から考える
ブロックレベル要素とインライン要素の概念を理解するにあたり、まずは現実における実例から考えていきたいと思います。
さて、皆さんの住んでいる部屋に本棚はありますか？
あってもなくても、どんなものかはイメージできると思います。
本棚は ブロックレベル要素 にあたり、
中に収納された本は インライン要素 にあたります。
それでは、本棚とその中の本を例に、ブロックレベル要素とインライン要素の概念について考えてみましょう。
本棚（ブロックレベル要素）
まず前提として、本棚は 本を収納するための家具 であり、
中に本を収納して初めて「本棚」としての意味を持ちます。
つまり、ブロックレベル要素とは 「他の要素を格納するための要素」 なのです。
ブロックレベル要素の特徴は、この前提に基づいて考えていくと理解しやすくなります。
サイズについて
まずはサイズについてです。
部屋に置く本棚のサイズを選ぶ時のことをイメージしてみてください。
サイズを決めるにあたって、どんな点を意識するでしょうか？
人によっていろんな条件がありますが、必須になるのはおそらく次の２点です。
- 本棚を配置する部屋の大きさ
- 収納したい本の量
本棚のサイズを部屋より大きくするわけにはいきません。
部屋に入らなければそもそも本棚を用意する意味がなくなってしまいます。
そして最低限、部屋に入る大きさであれば、
後は収納したい本の量に応じて自由にサイズを決めることができます。
ブロックレベル要素のサイズ設定が自由なのはこのようなイメージに基づいています。
配置について
次に配置についてです。
こちらは部屋に置く本棚を増やしたい時のイメージです。
それぞれの本棚は独立しているので、本棚同士を配置する間隔は好きに決めることができます。
余白をとって離して置くのも、ぴったりくっつけて置くのもあなたの自由です。
ブロックレベル要素の余白は、レイアウトに応じて自由に設定することができます。
改行について
最後に改行についてです。
これも複数の本棚を部屋に置くときをイメージしてください。
たとえば異なる形、異なる材質の２つの本棚を部屋に置くとき、わざわざ本棚同士を重ねて置くようなことはしないはずです。
もちろんできなくはないのですが、そういったことをするのは、
同じデザインのものや、組み合わせがレイアウトとして美しい場合などに絞られてくるはずです。
なのでブロックレベル要素は、デフォルトとしては改行する（= 本棚同士を並列に置く）ような設定になっています。
本（インライン要素）
他の要素である本を収納することで初めて意味を持つ本棚とは異なり、
本は、それ自体が単独で意味を持ちます。
インライン要素とは、「意味を持ち、単独で完結する要素」 のことです。
サイズについて
本のサイズはそれぞれバラバラです。
同じ本でも、辞書のような分厚くて大きな本から、新書のような薄くて小柄な本もあります。
本のサイズはその内容、つまり紙の規格やページ数によって決まります。
内容に応じてサイズが決定するため、わざわざ自分でサイズを変える必要がありません。
サイズの指定ができないのは、その必要性がそもそもないからなのです。
配置について
配置についてはどうでしょう。
本は背表紙を手前に向け、間を詰めて並べて置くと安定します。これが デフォルト です。
ではそうやって本棚に本を並べて置いた後、本同士で余白をとろうと思うと、どの程度自由が効くでしょうか。
実際にイメージしてみると、
基本的に 横の間隔 で調整することになると思います。
縦の余白もイメージできるよ！と思ったあなた。
それ、本棚の"段"が上下してませんか？
それは本の余白というよりは、棚の内側の余白です。
インライン要素の余白設定にクセがあるのは、
基本的に縦の余白はブロックレベル要素の余白で補完することができ、
自身は横の間隔を調整できれば十分だからです。
改行について
改行についてはデフォルトの配置を改めてイメージしてみましょう。
本は背表紙を手前に向け間を詰めて並べて置くと安定します。
たとえサイズが異なる本でも、毎回本棚の違う段に置くようなことは時間と空間のムダになります。
もちろんできなくはないのですが、それはある程度本の数が増え、サイズごとにまとめた方がいいような場合に意識して行うもので、最初からやるようなことではありません。
なのでインライン要素は、デフォルトで改行しない（=横に並べる）ような設定になっています。
概念について考える
これらの例からわかることはなんでしょうか。
ここではこれまでの実例を振り返りながら、ブロックレベル用途とインライン要素が持つ概念についてまとめていきます。
ブロックレベル要素の概念
まず、ブロックレベル要素の役割は、他の要素を格納することです。
本棚が本を収納するためにあるように、articleやtable、クラス付けしたdivなどのタグは、その役割に合わせたコンテンツを格納して初めてその意味を持ちます。
- 高さや幅、余白を自由に設定できる
- 前後に改行が入る
これらはブロックレベル要素が持つ 「他の要素を格納するための要素である」 という概念に基づくものです。
インライン要素の概念
そしてインライン要素は、それ自体が完結した意味を持つ要素です。
本が単体で意味を持つように、strongやa、クラス付けしたspanなどのタグで囲まれたコンテンツは、最初からそのタグに応じた意味を持っています。
- サイズや余白の設定に不自由がある
- 前後に改行が入らない
こういった特徴は、インライン要素の 「意味を持ち、単独で完結する要素である」 という概念から自然に生まれてくるものになります。
まとめ
最後にまとめとして、
ブロックレベル要素とインライン要素の特徴を再確認し、
冒頭の問いに答えていきましょう。
| 比較項目 | ブロックレベル要素 | インライン要素 |
|---|---|---|
| 他の要素の格納 | できる | できない |
| サイズの指定 （高さと幅） |
できる | できない （内容に依存） |
| 余白の設定 （配置の調整） |
できる | 部分的にできる （余白の方向による） |
| 要素の前後の改行 | 入る | 入らない |
「どうしてこのような性質を持つのか」
ブロックレベル要素とインライン要素の性質は、
それぞれが持つ概念から生まれています。
- ブロックレベル要素は 「他の要素を格納するための要素である」
- インライン要素は 「意味を持ち単独で完結する要素である」
このような概念が２つの要素の中にあるからこそ、
それぞれの性質、違いが生まれてきます。
「なぜこのような分類が必要なのか」
ブロックレベル要素とインライン要素のような関係は、現実においてもよく見かけます。
- 本棚と本
- タンスと服
- 筆箱と鉛筆
- 部屋と家具
"入れ物と中身"という関係は、日常の中に当たり前のように存在しています。
それだけ基本的で便利な仕組みなのだと思います。
"入れ物"と"中身"という２つの分類をWebデザインのためにに適用したのが、
ブロックレベル要素 と インライン要素 という分類方法なのだと思います。
この分類があるからこそ、私たちはレイアウトがの整った綺麗なWebページを見ることができます。
終わりに
この記事は、
「ブロックレベル要素とインライン要素ってどう違うの？」
ということを聞かれた時、冒頭で表にまとめたような内容をただ暗記して（一部間違えながら）説明したところ、
「それは本質的じゃない。もっと概念から考えるといいよ」
というアドバイスをもらったことから始まりました。
それから本質って何？と思いながら色んなサイトを巡り、
- これらの要素はどうしてこんな特徴を持つ必要があるのか
ということを現実にリンクさせてイメージできた時に、初めてこの二つの要素がスッキリ理解できた気がしたので、そのイメージを自分の言葉でまとめてみました。
自分自身が初学者なので、各要素の理解について甘い部分がありましたらぜひコメントいただけると嬉しいです！
この記事が自分と同じようにに迷った初学者の助けになれば幸いです！