【HTML】ブロック要素とインライン要素について【CSS】

今回はWordPressでもぶつかる事のある初心者の壁の一つ
ブロック要素とインライン要素について勉強したことを備忘録的にアウトプットしていこうと思います。

ブロック要素、インライン要素とは何か

HTMLのタグにはあらかじめそのタグが持つ性質があり、それによってブラウザへの出力の仕方が変わります。

その中で最も基本的な性質がブロック要素とインライン要素でしょう。

ではまず二つ基本的な違いを考えてみます。

ブロック要素

ブロック要素、正確には【Block-Level Elements】と表記されるみたいでブロックレベル要素が正式なのでしょうが、意味は同じで扱われているので、どちらでもいいと思います。

このブロック要素は、その名の通り箱と考えるのがわかりやすいかもしれません

WordPressにおいてもグーテンベルクエディタではブロック編集を行いますが、まさにその一つ一つのブロックがそのままブロック要素として働いています。

HTMLタグで言うと＜ｈ＞タグや<div>タグ＜ｐ＞タグなどが初期値としてブロック要素を持っています。

一番わかりやすい違いは、そのタグで囲まれた物は自動的に前後に改行が入る。という点と、CSSによって横幅と高さの設定が可能である。という点ですね。

See the Pen
inline&box by ざんと (@zanto_kirisame)
on CodePen.

インライン要素

次にインライン要素ですが、こちらはin-line（行に入る）といった意味合いのインラインですね。

ここで言う行とはブロック要素と置き換えられます。
つまりブロック要素という箱の中に入っている要素がインライン要素です。

インライン要素とはこういった文章そのものもまたインライン要素で、インライン要素を持ったタグで囲んでも自動で改行されることはなく、横幅や高さの設定も不可能です。

See the Pen
block by ざんと (@zanto_kirisame)
on CodePen.

ブロック要素は箱、インライン要素は中身そのもの

ここでもう少し理解を深めるためにブロック要素とインライン要素の本質について考えてみたいと思います。

まずにブロック要素とはそのまま箱そのものですので、その中に何も入っていなくても、箱は箱として存在します。
※ただし、横幅と高さの指定は必要です。

一方インライン要素は箱の中の要素そのものなので、インライン要素を持ったタグの中に何も入っていなければ、何も表示される事はありません。
※横幅と高さの指定が出来ない為、CSSで指定しても何も表示されません。

See the Pen
inline&block by ざんと (@zanto_kirisame)
on CodePen.

まとめ

ブロック要素とインライン要素についていかがだったでしょうか？
今まではなんとなく使っていたタグも、こういった性質について知ると使いどころがなんとなくわかってきて楽しいですよね。

この他にもmarginやpaddingの設定でも違いが出てきますので、また追記していきたいと思います。

では、良いブログライフを！←太字にする<strong>タグはインライン