[深掘り]block-level element vs inline-level element

概要

以下の流れで、軽くメモいたしました。

• CSSのスタイル・値から見覚えがあり、このチャンスで一回はまとめておきたかった
• 間違って使うと「改行とかおかしくねぇか」などの次元でなく、「あれ、なんでこのテキストのリンクのクリック部分が余計に長いんだ」などのミスが生まれやすい（筆者の私もそのせいでミスったことがあります）
• そのため、フレームワーク中心の画面開発に慣れていた筆者においても、この基礎的なところをはっきりして進むことが重要だと思い、記録

簡単サンプル

<h1>ブロックレベル</h1>
<p>それぞれの要素が、ひとつのブロックとしてスペースを持ちます。</p>
<p>そのため、pタグをたとえとして、段落ごとにpタグを分けて使うと、その分改行されるようになります。</p>
<p>本や記事などを思い浮かんだら良いと思います。</p>
<p>この「ブロック」という属性により、CSSのdisplay blockオプションを追加すると「この要素はブロックとして扱うぞ！」と宣言するようになり、動きもblockを従います。</p>

<h1>インラインレベル</h1>
<span>一方、インラインレベル(an inline-level element)要素は、<b>そのコンテンツ分の長さ・高さ</b>のみスペースを持ちます。</span>
<span>そのため、pタグと違い、複数のインラインレベルタグを使うのだとしても、特に改行があったりはしません。</span>
<span>この「インライン」属性に従い、CSSのdisplay inlineやinline-blockオプション追加すると「この要素はインラインとして扱うぞ！」と宣言するようになり、動きもblockを従います。</span>

本格解説：「ブロック」・「インライン」

Block-level element（ブロックレベル）

一つづつの要素が、言葉その通りに「ブロック」として扱われます。
VSCodeなどのエディターで改行を入れながら複数の要素を使うと、WEB上にも普通に改行されたりします。
widthの場合は特に指定がないとfull-widthとして扱われます。
ブロックレベルの要素中ではインラインレベルの要素を含むことができます。

<div>
<p>このようなブロックレベルの要素の中で、<em>インラインレベルのタグ</em>も含まれたりします。
</div>

Inline-level element（要素レベル）

一つづつの要素が、言葉その通りに「インライン」として扱われます。
VSCodeなどのエディターで改行を入れながら複数の要素を使っても、WEB上では改行条件に当てはまらないと基本的には改行が行われません。
ブロックレベルの要素中とは違い、インラインレベルの要素ではブロックレベルの要素を含むことができません。

タグ一覧

ブロックレベル

• <h1>-<h6>や、<p>など、ひとつの「段落」を分ける時に使われる見出しタグ・文字タグ
• <div>も代表的なブロックレベル要素で、実務上でもdiv単位で要素を紐付き、区切りをつけるなどの動きが結構ある感じでした
• <article>, <nav>, <section>, <header>, <footer>のように、HTML5モデルの「Sectioning Contents」に当てはまるタグ
• <dl>, <dt>, <dd>や<ol>, <ul>, <li>のようにリストを構成するタグ
• <table>, <tfoot>, <tr>, <th>, <td>など、テーブルを構成するタグ

インラインレベル

• こちらは、代表的に<span>が存在
• <b>, <u>, <s>, <strong>, <em>, <del>...<sup>, <sub>など、文字に何か強調したり
• <img>, <object>
• <input>, <label>のようなform部品

おまけ：display:inline vs display:inline-block

blockやinlineだけでなく、CSSで時々見れる「inline-block」もこのチャンスで解説いたします。

display:inline

基本的に完全なるインラインレベルの要素の特徴を持ちます。そのため、widthやheightの指定ができません。

display:inline-block

基本的にインラインレベルの要素を特徴を持ちながらも、widthやheightが指定できるなど、inlineの上にblockの特徴も一部持っています。

そのため、基本的にはinlineとして扱われるようにし、場合によって長さ・高さなどのスタイルを指定するなど、状況によって柔軟に使えます。

結論（＋感想）

ポイント

• <p>や<span>は同じ文字タグのように見えるが、かなり違う要素である！
• CSSスタイルを指定する、またはデザインを変更する際においてもこの特徴をきちんと理解し、使い分けるとベスト

感想

• 初めてこの概念を理解する時、使う状況を代入して覚えてみたら理解することに役に立ちました
  • <h1> - <h6>, <p>が普通に「段落を分ける」時に使われること
  • テーブルやSectioning Contentsの場合は、その分の「ブロック」を借りる必要があるため、ブロックレベルになる
  • 一方、<strong>や<em>など、文字に何かの効果を追加することは余計にUXに邪魔になるため、インラインレベルになるしかない
• HTML5やCSSは見た目や認識より「コンテンツモデル」などの概念を筆頭に、仕組みがすごくよく構築されていて学べば学ぶほどそのなりの深さがあることを感じました
  • 特に、WEBデザインの領域にも携わりつつ、より理解度のあるフロントエンドエンジニアとして成長するためにはHTML・CSSもしっかりしないといけないと思いました（そのきっかけにより、最近はHTML5プロフェッショナルの資格を準備やCSSチャレンジに試してみるなどの個人勉強もやっています）

参考

W3C