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

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

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

要素について

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

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

サンプルコード

.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);
}
<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>
定義あり

定義あり

定義あり

定義あり

定義あり
DOMインターフェース
[Exposed=Window]
interface HTMLDivElement : HTMLElement {
[HTMLConstructor] constructor();

// also has obsolete members
};
UAスタイルシート
@namespace url(http://www.w3.org/1999/xhtml);

div {
display: block;
unicode-bidi: isolate;
}

/* 文書の文字エンコーディングが ISO-8859-8 である場合 */
div {
unicode-bidi: bidi-override;
}
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク