このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

div要素:特定の範囲をグループ化

記事Apr. 19th,2015
July 7th,2020
特定の範囲をグループ化する要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

カテゴリー フロー・コンテンツパルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
またはdl”要素の子要素としてHTML Living Standardで定義
内容 本文参照
タグの省略 不可

div”要素は特定の範囲にあるコンテンツをグループ化するための要素です。“div”要素は特別な意味を持たず、特定の範囲にスタイルを適用したり、グローバル属性を指定したりするために使用することができます。

グループ化する範囲が段落である場合はp”要素を使用するなど、ほかに適切な要素がある場合は該当する要素を使用するべきです。また、インラインレベルのコンテンツをグループ化する場合はspan”要素を使用します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルの文書</title>
<style>
.red-box {
border: 10px solid rgb(243,86,109);
border-radius: 20px;
margin: 5px 0px;
padding: 20px 10px;
background-color: rgb(215,206,202);
}

.yellow-box {
border: 10px solid rgb(251,223,111);
border-radius: 20px;
margin: 5px 0px;
padding: 20px 10px;
background-color: rgb(215,206,202);
}
</style>
</head>
<body>

<div class="red-box">
<p>
りんごはバラ科リンゴ属の落葉高木樹で果実は赤い。
</p>
<p>
いちごはバラ科オランダイチゴ属の多年草で食べる部分は果実ではなく花托である。花托は赤い。
</p>
<p>
アセロラはキントラノオ科ヒイラギトラノオ属の常緑低木樹で果実は赤い。
</p>
</div>
<div class="yellow-box">
<p>
バナナはバショウ科バショウ属の多年草で果実は黄色い。
</p>
<p>
レモンはミカン科ミカン属の常緑低木樹で果実は黄色い。
</p>
</div>

...

りんごはバラ科リンゴ属の落葉高木樹で果実は赤い。

いちごはバラ科オランダイチゴ属の多年草で食べる部分は果実ではなく花托である。花托は赤い。

アセロラはキントラノオ科ヒイラギトラノオ属の常緑低木樹で果実は赤い。

バナナはバショウ科バショウ属の多年草で果実は黄色い。

レモンはミカン科ミカン属の常緑低木樹で果実は黄色い。

<div lang="en">
<p>
Why did the chicken cross the road?
</p>
<p>
To get to the other side.
</p>
</div>

Why did the chicken cross the road?

To get to the other side.

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性

過去に定義された属性

属性
属性 説明 説明
align=""注意 内容の水平方向の位置 left 左寄せ
center 中央揃え
right 右寄せ
justify 両端揃え

要素の内容

親要素が“dl”要素の場合

div”要素の内容は1個以上のdt”要素に続く1個以上のdd”要素の組み合わせを1個以上、それに任意でスクリプト支援要素です。

親要素が“dl”要素ではない

div”要素の内容はフロー・コンテンツです。

仕様書

div”要素はHTML3.2から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<div>
定義あり

定義あり

定義あり

定義あり

定義あり
HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
align=""
非推奨

削除

削除

削除

削除
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク