HTML要素 ・ ページ構造
<div>
汎用のブロック要素
意味を持たない汎用のブロック要素です。レイアウトや装飾のために、要素をグループにまとめるときに使います。
01
サンプルコード
HTML
1<div class="box">
2 <p>div で囲んだ部分に、枠線と背景を付けています。</p>
3</div>
4<div class="row">
5 <div>A</div>
6 <div>B</div>
7 <div>C</div>
8</div>
CSS
1.box {
2 padding: 12px 16px;
3 background: #faf5ec;
4 border: 1px solid #e1ad66;
5}
6.row {
7 display: flex;
8 gap: 8px;
9 margin-top: 12px;
10}
11.row div {
12 padding: 8px 16px;
13 background: #eee;
14}
02
実行結果
ブラウザでの表示
03
解説
div は "division"（区分）の略です。それ自体に意味はなく、CSSでレイアウトや装飾をするために複数の要素をまとめる箱として使います。
div はブロック要素なので、前後で改行され、横幅いっぱいに広がります。
内容に意味がある場合は、header・nav・main・section・article などの適切な要素を優先し、どれにも当てはまらないときに div を使います。
04
応用例・注意点
意味のある要素で置き換えられる例
| 用途 | 説明 |
|---|---|
ページ上部の囲み | header |
メニューの囲み | nav |
主要な内容の囲み | main |
章の囲み | section |
記事カード | article |
中央に寄せた幅の決まった箱
ページの内容を一定の幅に収める「コンテナ」は div の代表的な使い方です。
HTML
1<div class="container">
2 …
3</div>
CSS
1.container {
2 max-width: 960px;
3 margin: 0 auto;
4 padding: 0 20px;
5}
注意点
- 01div ばかりで組むと文書の構造が伝わりません（「div スープ」と呼ばれます）。
- 02クリックできる部品を div で作らず、button や a を使います。