

#
要素について
“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.
#
#
#
仕様書
“div”要素はHTML3.2から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。
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;
}