我が家の猫たち
うちには二匹の猫がいます。名前はシロとクロ。兄弟なのに毛の色も性格も正反対です。
シロは真っ白です。おっとりしていますが、暖かいパソコンの上に乗ってきて仕事の邪魔をするのが日課です。
クロは真っ黒です。やんちゃでいつも走り回っています。ドアを開けてやると鉄砲玉のように飛び出します。
二匹ともご飯の時間にはすり寄ってきます。
<div>タグは、ひとかたまりの範囲として定義する際に使用します。
<div>には特別な意味はありませんが、
<div>～</div>で囲まれた範囲を一つのグループとしてまとめることができます。
ページレイアウトやスタイリングを指定する際に、CSSを適用するためのコンテナ要素として使用されることの多いタグです。
<div>は大変便利なタグですが、他に適切な要素が無い場合の最終手段として使用することが強く推奨されています。
より適切な要素があるにも関わらず<div>を使用していると、
ウェブページのアクセシビリティやメンテナンス性が低下してしまうからです。
例えば、ブログの投稿には<article>、
章の区切りには<section>、
ページのナビゲーションには<nav>、
フォームグループには<fieldset>
を使用してマークアップするべきでしょう。
一方で、<div>はスタイリング目的の場合や、
class属性・lang属性・title属性などの属性で複数の要素に同じ値をまとめて指定する場合には便利でしょう。
以下の使用例は、二つの段落を<div>でくくってCSSによるスタイリングをまとめて指定しています。
HTML4.01では、div要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。
HTML5では、div要素のalign属性は廃止されています。
揃え位置の指定にはCSSを使用してください。
また、HTML5では
<article>・
<aside>・
<nav>・
<section>
などの新しい要素が追加されているので、
これらの新しい要素のほうが<div>よりも適切なケースがあるかもしれません。
<article>
<h1>我が家の猫たち</h1>
<p>うちには二匹の猫がいます。名前はシロとクロ。兄弟なのに毛の色も性格も正反対です。</p>
<div style=” background-color:black; color:white;”>
<p>シロは真っ白です。おっとりしていますが、暖かいパソコンの上に乗ってきて仕事の邪魔をするのが日課です。</p>
<p>クロは真っ黒です。やんちゃでいつも走り回っています。ドアを開けてやると鉄砲玉のように飛び出します。</p>
</div>
<p>二匹ともご飯の時間にはすり寄ってきます。</p>
</article>
うちには二匹の猫がいます。名前はシロとクロ。兄弟なのに毛の色も性格も正反対です。
シロは真っ白です。おっとりしていますが、暖かいパソコンの上に乗ってきて仕事の邪魔をするのが日課です。
クロは真っ黒です。やんちゃでいつも走り回っています。ドアを開けてやると鉄砲玉のように飛び出します。
二匹ともご飯の時間にはすり寄ってきます。