HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス / HTML5（目的別） / <div>

HTML5  <div>

<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>１代目は1982年製のSUZUKI GSX750E4 KATANAと同じエンジンを積んだ兄弟車でした。</p>
<p>もう1台はYAMAHAのRZV500Rを1984年の発売にすぐ注文したバイクで2サイクル500ccのV型4気筒エンジン。<br>
当時人気のレーサーレプリカでした。</p>
</div>
<p>2台を乗り換えて、よく箱根や湯河原から芦ノ湖までワインディング走行に行きました。<br>
4サイクルと2サイクルは乗り味が違い、どっちに乗っても楽しいバイクでした。</p>
</article>
↓↓↓
リンク先のページで表示を見ることができます