HTMLのタグには、「見た目」ではなく 性質 によってblock要素（ブロック） と inline要素（インライン） の2種類があります。
この2つを理解すると、レイアウト・余白・改行の扱いがスムーズになり、CSSの基礎もぐっとわかりやすくなります。
この記事では、ブロック要素とインライン要素の本質・違い・具体例・よくあるミス を初心者向けに丁寧に解説します。
block要素とは？
横幅いっぱいに広がり、前後で必ず改行されるタイプの要素。
代表例：
<div><p><h2>〜<h6><ul>、<ol>、<li><table><header>、<footer><section>、<article>
特徴
- 横幅いっぱい（100%）になる
- 要素の前後で自動的に改行
- width / height を自由に設定できる
- margin / padding が上下左右に効く
- レイアウトの「箱」を作る要素が多い
→ デザインやレイアウトの基礎を担う存在。
inline要素とは？
文章の一部として扱われ、改行されない タイプの要素。
代表例：
<span><a><strong>、<em><img>（画像は特殊だがインライン扱い）<code><label>
特徴
- テキストの流れの中で横に並ぶ
- 改行はしない
- 幅/高さは指定できない（textの量で決まる）
- margin は左右のみ有効（上下は効きにくい）
- padding はつくが、上下は反映がわかりにくいことがある
- 文章中の部分装飾・強調に向いている
ブロックとインラインの違い一覧
| 性質 | block要素 | inline要素 |
|---|---|---|
| 横幅 | 100%（横いっぱい） | テキスト分だけ |
| 改行 | 自動で改行される | 改行されない |
| width/height | 設定できる | できない |
| margin | 上下左右に効く | 左右のみ有効 |
| padding | 上下左右に効く | 付けられるが上下は反映が曖昧 |
| レイアウト | 主にレイアウト枠 | 文章中の一部 |
| 代表タグ | div, p, h2, section など | span, a, strong など |
要点まとめ
- ブロック：箱
- インライン：文章の一部
具体的なタグ例（覚えるべき代表）
ブロック要素
<div>（汎用ブロック）<p>（段落）<h2>（見出し）<section>（章）<ul>/<ol>/<li>（リスト）
インライン要素
<span>（汎用インライン）<a>（リンク）<strong>（強調）<em>（文脈強調）<code>（コード）
一番よくある使い分けの基準（これだけ覚えればOK）
- ページ全体のレイアウト → block
- 文章の一部分を囲いたい → inline
- 意味のあるまとまり → block を使う（p、h2 など）
- 意味の無い細かい範囲 → span（inline）
結論
- 大きな枠 → block
- 文章の一部 → inline
CSS display プロパティとの関係（重要）
HTMLタグの種類は、CSSの display プロパティで変更できます。
例：span をブロック要素にする
span {
display: block;
}
例：div をインライン化する
div {
display: inline;
}
HTMLの性質 × CSSのdisplay は別物
→ 両方理解することでレイアウト自由度が上がる。
よくある間違い
pタグの中に div を入れてしまう
→ pはインライン要素しか入れられません。
inline要素に width/height を指定しても変わらない
→ display: inline-block; にすればOK。
ブロックとインラインを理解せずに CSS が崩れる
→ 大半はdisplayと要素タイプの理解不足で起こる。
まとめ
- block要素 → 横幅100%、改行される、レイアウト用の箱
- inline要素 → 改行されない、文章の一部に使う
- width/height が使えるかが大きな違い
- CSSの display で挙動を変えることも可能
- HTMLの構造を理解するカギになる基礎知識
著者からのひと言
block要素とinline要素の違いを理解すると、HTMLとCSSの“クセ”が一気につかめます。
特にレイアウト崩れの原因の多くはこの違いを知らないことなので、早い段階で習得しておくと実務でも非常に役に立ちます！
次回の記事は「classとidの違いと命名のコツ」です。
この記事が役に立ったら、いいね！お願いします！
