HTMLのブロック要素とインライン要素の違い

HTML ブロック要素とインライン要素とは？

HTMLの要素は大きく2種類に分かれます。ブロック要素とインライン要素です。この違いを理解することで、レイアウトの仕組みがわかりやすくなり、CSSでデザインするときに「なぜ思い通りにならないのか」がわかるようになります。この記事で違いをしっかり理解しましょう。一度覚えれば、CSSのレイアウトで悩むことが格段に減ります。

たとえば「ボタンを横並びにしたいのにできない」「spanにwidthを指定しても効かない」といった問題は、ブロック要素とインライン要素の違いを理解していれば簡単に解決できます。

ブロック要素の特徴と代表タグ

• 前後に改行が入る（縦に積み重なる）
• 横幅が親要素いっぱいに広がる
• width・height・margin・paddingが自由に設定できる

代表的なブロック要素：div・p・h1〜h6・section・article・header・footer・ul・ol・li・table

ブロック要素は「箱」のようなイメージです。箱は縦に積み重なり、横幅いっぱいに広がります。CSSで width を指定すれば幅を変えられますが、指定しなければ親要素の幅いっぱいに広がります。

<p>これはブロック要素です。</p>
<p>前後に改行が入り、縦に並びます。</p>

💡 metaタグの書き方で基礎を確認できます。

インライン要素の特徴と代表タグ

• 前後に改行が入らない（横に並ぶ）
• 内容の幅だけ広がる
• width・heightは設定できない（上下のmarginも効かない）

代表的なインライン要素：span・a・strong・em・code・img・input・button

インライン要素は「文字」のようなイメージです。文章の中に自然に溶け込み、前後の要素と横に並びます。リンク（aタグ）や強調（strongタグ）が代表例です。

<p>
  これは<strong>インライン要素</strong>の例です。
  <a href="/">リンク</a>も横に並びます。
</p>

🔗 あわせてエラー辞典もチェックしてみましょう。

CSSでdisplayを切り替える

display プロパティを使うと、ブロック要素とインライン要素を切り替えられます。

/* インライン要素をブロックに変える */
a {
  display: block;
  padding: 12px 24px;
}

/* ブロック要素をインラインに変える */
li {
  display: inline;
}

/* 両方の特性を持つ（最もよく使う） */
.btn {
  display: inline-block; /* 横に並びつつ、width・heightも設定できる */
  padding: 10px 24px;
}

inline-block は「横に並ぶ（インライン）」かつ「width・heightが設定できる（ブロック）」という便利な値です。ボタンやナビゲーションリンクを横並びにしたいときによく使います。現在は display: flex を使う方が主流ですが、inline-block も知っておくと便利です。

📖 詳しくはHTMLとCSSの違いで解説しています。

よくある間違い

• インライン要素の中にブロック要素を入れる：<span> の中に <div> を入れるのはHTMLの仕様上NGです。ブロック要素の中にインライン要素を入れるのが正しい順番です。ただし <a> タグは例外で、HTML5ではブロック要素を囲むことが許可されています。
• インライン要素にwidth/heightを指定する：<span> や <a> にwidthを指定しても効きません。display: inline-block か display: block に変更する必要があります。開発者ツールで確認すると、指定が無視されていることがわかります。
• 改行のためにbrタグを連続で使う：余白はCSSの margin や padding で調整しましょう。<br><br><br> のような書き方は避けてください。
• divの乱用：すべてを <div> で囲むのではなく、適切なセマンティックタグ（<nav>・<main>・<section>など）を使いましょう。

🔗 displayプロパティでblock/inline/flexの切り替えを詳しく学べます。

💡 marginとpaddingの違いで余白の使い方を確認しましょう。

HTML5のセマンティック要素

HTML5では、div の代わりに意味を持つブロック要素が追加されました。

• <header>：ページやセクションのヘッダー
• <nav>：ナビゲーション
• <main>：メインコンテンツ
• <article>：独立した記事
• <section>：テーマごとのまとまり
• <footer>：フッター

これらはすべてブロック要素として振る舞いますが、「この部分は何なのか」を検索エンジンやスクリーンリーダーに伝える役割があります。

📖 セマンティックHTMLで詳しく学べます。

実践例：ナビゲーションメニュー

ブロック要素とインライン要素の違いを活かした実践例を見てみましょう。ナビゲーションメニューでは、リスト項目（ブロック要素）を横並びにするために display: inline-block や display: flex を使います。

<nav>
  <ul style="display: flex; list-style: none; gap: 16px;">
    <li><a href="/">ホーム</a></li>
    <li><a href="/about/">自己紹介</a></li>
    <li><a href="/blog/html-css-project-ideas/">作品集</a></li>
  </ul>
</nav>

ul（ブロック要素）に display: flex を指定すると、子要素の li が横並びになります。Flexbox入門で詳しく学べます。

まとめ

ブロック要素とインライン要素の違いを理解すると、レイアウトの仕組みがわかりやすくなります。「なぜ横並びにならないのか」「なぜwidthが効かないのか」という疑問が解決します。レッスンでさらに詳しく学んでみましょう。

現代のレイアウト：FlexboxとGrid

現在のWeb開発では、display: flex や display: grid を使ったレイアウトが主流です。これらを使うと、ブロック要素を簡単に横並びにしたり、複雑なレイアウトを作ったりできます。

• Flexbox：1次元（横方向 or 縦方向）のレイアウトに最適。ナビゲーションやカードの横並びに使います。
• Grid：2次元（行と列）のレイアウトに最適。ページ全体のレイアウトや、ギャラリーに使います。

ブロック要素・インライン要素の基本を理解した上でFlexboxやGridを学ぶと、なぜそのように動作するのかが深く理解できます。基礎があってこそ応用が活きるのです。まずはこの記事でブロック要素とインライン要素の違いをしっかり理解してから、FlexboxやGridに進みましょう。「なぜdisplay:flexで横並びになるのか」「なぜinline-blockだと隙間ができるのか」——これらの疑問は、ブロック要素とインライン要素の基本を理解していれば自然と解決します。CSSレイアウトの土台となる知識なので、しっかり身につけておきましょう。この記事の内容を理解できたら、次はFlexboxに挑戦してみてください。レイアウトの自由度が格段に上がります。ブロック要素とインライン要素の違いは、CSS学習の最初の壁ですが、一度理解すれば二度と迷いません。この知識があれば、どんなレイアウトも怖くありません。HTMLとCSSの基礎をしっかり固めて、美しいWebページを作りましょう。次のステップとしてFlexboxを学ぶと、レイアウトの幅が一気に広がります。基礎を固めてから応用に進みましょう。急がば回れです。基礎は裏切りません。しっかり理解しましょう。

📖 Flexbox入門・Grid入門で詳しく学べます。