トップページ  > HTML5  > <div>

★HTML5タグリファレンス

<div> …… ひとかたまりの範囲として定義する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6 Safari3Safari4Safari5 Opera6Opera7Opera8Opera9Opera10

<div>タグは、ひとかたまりの範囲として定義する際に使用します。 <div>には特別な意味はありませんが、 <div>~</div>で囲まれた範囲を一つのグループとしてまとめることができます。 ページレイアウトやスタイリングを指定する際に、CSSを適用するためのコンテナ要素として使用されることの多いタグです。

<div>は大変便利なタグですが、他に適切な要素が無い場合の最終手段として使用することが強く推奨されています。 より適切な要素があるにも関わらず<div>を使用していると、 ウェブページのアクセシビリティやメンテナンス性が低下してしまうからです。

例えば、ブログの投稿には<article>、 章の区切りには<section>、 ページのナビゲーションには<nav>、 フォームグループには<fieldset> を使用してマークアップするべきでしょう。

一方で、<div>はスタイリング目的の場合や、 class属性・lang属性・title属性などの属性で複数の要素に同じ値をまとめて指定する場合には便利でしょう。 以下の使用例は、二つの段落を<div>でくくってCSSによるスタイリングをまとめて指定しています。

■HTML4.01からHTML5へのバージョンアップによる変更点

HTML4.01では、div要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。 HTML5では、div要素のalign属性は廃止されています。 揃え位置の指定にはCSSを使用してください。

また、HTML5では <article><aside><nav><section> などの新しい要素が追加されているので、 これらの新しい要素のほうが<div>よりも適切なケースがあるかもしれません。

■使用例

HTMLソース

<article>
<h1>我が家の猫たち</h1>
<p>うちには二匹の猫がいます。名前はシロとクロ。兄弟なのに毛の色も性格も正反対です。</p>
<div style=" background-color:black; color:white;">
<p>シロは真っ白です。おっとりしていますが、暖かいパソコンの上に乗ってきて仕事の邪魔をするのが日課です。</p>
<p>クロは真っ黒です。やんちゃでいつも走り回っています。ドアを開けてやると鉄砲玉のように飛び出します。</p>
</div>
<p>二匹ともご飯の時間にはすり寄ってきます。</p>
</article>
↓↓↓

ブラウザ上の表示

我が家の猫たち

うちには二匹の猫がいます。名前はシロとクロ。兄弟なのに毛の色も性格も正反対です。

シロは真っ白です。おっとりしていますが、暖かいパソコンの上に乗ってきて仕事の邪魔をするのが日課です。

クロは真っ黒です。やんちゃでいつも走り回っています。ドアを開けてやると鉄砲玉のように飛び出します。

二匹ともご飯の時間にはすり寄ってきます。

▲ページ先頭へ
トップページ  > HTML5  > <div>
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ