HTML

ブロック要素

初級

読み方：ブロックようそ｜英語：Block Element

前後で改行され、横幅いっぱいに広がる要素だよ。例：div, p, h1。

やさしい説明

ブロック要素とは、前後で自動的に改行され、横幅いっぱいに広がる要素です。

段ボール箱を積み上げるイメージです。箱は1つずつ縦に積まれて、横幅は棚いっぱいに広がりますよね。ブロック要素も同じで、上から下へ1つずつ並びます。

代表的なブロック要素は <div>、<p>、<h1>〜<h6>、<ul>、<table> などです。ページの大きなまとまり（セクション、段落、見出し）に使います。

ブロック要素にはCSSで幅（width）や高さ（height）を自由に設定できます。余白（margin, padding）も上下左右すべて効きます。

<!-- ブロック要素は縦に並ぶ -->
<h1>タイトル</h1>
<p>1つ目の段落</p>
<p>2つ目の段落</p>

<!-- 結果：
タイトル
1つ目の段落
2つ目の段落
（それぞれ横幅いっぱいに広がる）
-->

HTML5 からは div の代わりに section・article・header・main・footer などの意味を持つ要素（セマンティックタグ）を使うことが推奨されています。SEOやアクセシビリティの向上につながります。

ページのレイアウトを作るときに使います。ヘッダー、メインコンテンツ、サイドバー、フッターなど、ページの大きな区画を作るのがブロック要素の役割です。

❌ ブロック要素を横に並べたいのに並ばない

ブロック要素はデフォルトで縦に積まれます。横に並べたい場合は、親要素に display: flex を指定しましょう。

<!-- CSSで横並びにする -->
<style>
  .row { display: flex; gap: 16px; }
</style>
<div class="row">
  <div>左</div>
  <div>右</div>
</div>

❌ インライン要素の中にブロック要素を入れる

span や a などのインライン要素の中にブロック要素（div・p など）を入れるのはHTMLの仕様違反です。意図しない表示崩れの原因になります。

Q: ブロック要素を横並びにするには？

A: CSSのdisplay: flexやdisplay: gridを使います。親要素にdisplay: flex;を指定すると子要素が横並びになります。

Q: 代表的なブロック要素は？

A: <div>、<p>、<h1>〜<h6>、<ul>、<ol>、<li>、<section>、<article>、<header>、<footer>などです。

Q: ブロック要素の幅を変えるには？

A: CSSでwidth: 300px;のように指定します。指定しないとデフォルトで親要素の幅いっぱいに広がります。