<div>***</div> グループ化する



「<div>***(特定の範囲)</div>」を使用すると、特定の範囲(インライン要素やブロックレベル要素)をグループ(ブロックレベル要素)にまとめることができます。

<div>にclass属性、id属性、lang属性を指定することで、特定の範囲全体に対して、共通のスタイルシートや言語情報を設定できるようになります。

▼HTMLとXHTMLでの記述例

HTML <div>***</div>
XHTML HTMLと同じ

▼使用例 >>下記のサンプルをブラウザで表示す る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>ページタイトル</title>
</head>

<body>

<div class="sample">
<p>ブロックレベル要素、インライン要素などをまとめてグループ化し、<b>ブロックレベル要素</b>を作ることができます。</p>
<p>グループ化した範囲全体に、スタイルシートを適応できるので、とても便利です。</p>
</div>

</body>

</html>

▼style.cssの記述内容

.sample {color: #8E5C2F; text-align: center; }

▼上記のサンプルの表示例(ブラウザ:Mozilla Firefox バージョン3.6.3)

▼上記のサンプルの表示例(ブラウザ:Internet Explorer 8)