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

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

<div>特定の範囲のグループ化</div>
特定の範囲をグループ化する要素
この記事はHTML5.2に対応しています。
この記事はHTML5.2に対応しています。

要素について

概要

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

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

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

サンプルコード

<div <style="> color: rgb(243,86,109);">
<p>
りんごはバラ科リンゴ属の落葉高木樹で果実は赤い。
</p>
<p>
いちごはバラ科オランダイチゴ属の多年草で食べる部分は果実ではなく花托である。花托は赤い。
</p>
<p>
アセロラはキントラノオ科ヒイラギトラノオ属の常緑低木樹で果実は赤い。
</p>
</div>
<div <style="> color: rgb(251,223,111);">
<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.

属性と値

属性
属性 説明 説明
任意属性
グローバル属性
HTML4までの属性
align=""注意 水平方向の位置の指定 left 左端揃え
right 右端揃え
center 中央揃え
justify 両端揃え

要素の内容

div”要素の親要素がdl”要素の場合は以下の順番で子要素を配置します。

親要素がdl”要素でない場合は“div”要素の内容はフロー・コンテンツです。

“HTML Living Standard”では“div”要素をdl”要素の子要素として配置できると定義されていますが、HTML5.2では定義されていません。

各属性の詳細

align”属性注意

概要

align”属性は段落内のテキストなどの水平方向の位置を指定する属性です。

HTML5ではこの属性は廃止されていますので使用するべきではありません。

代替方法

スタイルシートのtext-align”プロパティで指定します。

左端揃え
div {text-align: left;}
右端揃え
div {text-align: right;}
中央揃え
div {text-align: center;}
両端揃え
div {text-align: justify;}

指定できる値

属性値 説明
left 左端揃え
right 右端揃え
center 中央揃え
justify 両端揃え

サンプルコード

<div align="justify">
ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれていて栄養豊富なバナナは高カロリーと思われがちです。しかし、実は1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーです。しかも日常生活で不足しがちな栄養素がバランスよく含まれてるので、健康な生活にかかせない果物なのです。
</div>
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク