div を使ってみよう
更新日：2026-08-02
前のページでは、class を使って特定の要素へ CSS を適用しました。
今回は、Web制作で非常によく使われる div タグを学んでいきます。
div は、HTML の中で「箱」のような役割を持っています。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
└── index.html
div とは？
div は、
division（区切り）
の略です。
HTML の中で、
- 内容をまとめる
- グループ化する
- レイアウトを作る
ためによく使われます。
実際に書いてみよう
以下のように変更してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>divの練習</title>
<style>
body {
background-color: #f3f4f6;
padding-top: 60px;
}
.card {
width: 400px;
margin: 0 auto;
padding: 30px;
background-color: white;
border-radius: 12px;
text-align: center;
}
.title {
color: #2563eb;
font-size: 32px;
}
.message {
color: #4b5563;
font-size: 18px;
}
</style>
</head>
<body>
<div class="card">
<h1 class="title">
divの練習
</h1>
<p class="message">
divを使って箱を作っています。
</p>
</div>
</body>
</html>
保存したあと、ブラウザを更新してください。
白い箱が表示される
画面の中央に、白い箱のようなものが表示されたはずです。
これは、
<div class="card">
に CSS を適用しているためです。
div は「箱」と考えるとわかりやすい
今回の div は、
- 見出し
- 文章
をまとめるための箱として使っています。
その箱に対して、
- 背景色
- 横幅
- 余白
などを設定しています。
width
width: 400px;
は、箱の横幅を設定しています。
現在は、
横幅400px
という意味です。
background-color
background-color: white;
は、背景色を白にしています。
前回は body の背景色を変更しましたが、今回は div の背景色を変更しています。
padding
padding: 30px;
は、箱の内側の余白です。
これがないと、文字が箱の端にくっついてしまいます。
border-radius
border-radius: 12px;
は、角を丸くする設定です。
数字を大きくすると、もっと丸くなります。
例えば、
border-radius: 50px;
などにすると、大きく丸くなります。
margin: 0 auto;
margin: 0 auto;
は、要素を中央寄せするときによく使います。
現在は、
横方向を中央に配置する
という意味です。
Webサイトは「箱」の組み合わせ
実際のWebサイトでは、
- ヘッダー
- メニュー
- お知らせ
- 記事
- ボタン
- フッター
など、多くの要素が「箱」として作られています。
その箱を並べたり、色を付けたりして画面を作っています。
開発者ツールで見てみよう
ブラウザで右クリックして、
検証
を押すと、HTML構造を見ることができます。
div がどのように配置されているかも確認できます。
まずは「触って変化を見る」
今はまだ、
- なぜこうなるのか
- どのCSSを使えばよいのか
- どう組み合わせればよいのか
が完全にわからなくても問題ありません。
まずは、
- 数字を変える
- 色を変える
- width を変える
などを試しながら、
「見た目が変わる感覚」
をつかむことが大切です。
次のページでは
次のページでは、
- 画像表示
- img タグ
- パス
などを学んでいきます。
実際のWebページらしさがさらに増えていきます。