ブロック要素
初級読み方：ブロックようそ｜英語：Block Element
前後で改行され、横幅いっぱいに広がる要素だよ。例：div, p, h1。いつ使う？ ページのレイアウトを作るとき、セクションを区切るとき、見出しや段落を書くときに使うよ。間違いやすいポイント: ブロック要素は自動で横幅100%になるから、2つ並べても横並びにならないよ。横並びにしたいときはCSSのFlexboxやGridを使おう。
やさしい説明
ブロック要素とは、前後で自動的に改行され、横幅いっぱいに広がる要素です。
段ボール箱を積み上げるイメージです。箱は1つずつ縦に積まれて、横幅は棚いっぱいに広がりますよね。ブロック要素も同じで、上から下へ1つずつ並びます。
代表的なブロック要素は <div>、<p>、<h1>〜<h6>、<ul>、<table> などです。ページの大きなまとまり（セクション、段落、見出し）に使います。
ブロック要素にはCSSで幅（width）や高さ（height）を自由に設定できます。余白（margin, padding）も上下左右すべて効きます。
図解
具体例・使い方
<!-- ブロック要素は縦に並ぶ -->
<h1>タイトル</h1>
<p>1つ目の段落</p>
<p>2つ目の段落</p>
<!-- 結果：
タイトル
1つ目の段落
2つ目の段落
（それぞれ横幅いっぱいに広がる）
-->いつ使う？
ページのレイアウトを作るときに使います。ヘッダー、メインコンテンツ、サイドバー、フッターなど、ページの大きな区画を作るのがブロック要素の役割です。
間違いやすいポイント
❌ ブロック要素を横に並べたいのに並ばない
ブロック要素はデフォルトで縦に積まれます。横に並べたい場合は、CSSで display: flex を親要素に指定しましょう。
<!-- CSSで横並びにする -->
<style>
.row { display: flex; gap: 16px; }
</style>
<div class="row">
<div>左</div>
<div>右</div>
</div>よくある疑問
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;のように指定します。指定しないとデフォルトで親要素の幅いっぱいに広がります。
関連用語
📖 関連レッスン
レッスンを見る →