HTML STUDY
>
>

<div>でコンテンツをグループ化

ここではコンテンツに任意の名前をつけてグループ化していく方法を解説します。

<div>にid属性やclass属性を使用し任意の名前を付けCSS（スタイルシート）でデザインをしていきます。

<div>は特定の意味を持たない

div要素は特に意味を持ちませんが、コンテンツを１つのグループとしてまとめることができます。HTML5ではセクショニング・コンテンツとして<section>や<nav>など用途に合わせた構成がありますので適切な用途がある場合はそちらを優先して使用しましょう。またHTML4からHTML5に移行する場合も考えて<div>につける名前も、headerやarticle、sectionとHTML5のセクションに合わせた名前をつけておくと移行しやすいでしょう。例：<div class="header">→<header>

div要素に任意の名前をつけCSSでデザインする際、id属性とclass属性を使用する方法があります。id属性はひとつのid名に使えるタグはひとつのみで、CSSの記述の最初に「#」をつけます。class属性の場合は、ひとつのclass名に対して複数のタグに使用でき、CSSの記述の際には最初に「.」をつけます。

要素解説
<div>コンテンツをグループ化
属性解説
iddiv要素に任意の名前を与える（ひとつの名前に一度のみ使用可）
classdiv要素に任意の名前を与える（ひとつの名前を複数回使用可）
CSSプロパティ解説
font-size文字の大きさ
color文字の色
<div id="font-big">
<p>div要素にclass属性でfont-bigと名前をつけ文字の大きさを少し大きくしています。</p>
<p>div要素で囲まれた範囲で文字の大きさがCSSで設定されます。</p>
</div>

<div class="font-red">
<p>div要素にclass属性でfont-redと名前をつけ文字の色を赤にしています。</p>
<p>div要素で囲まれた範囲で文字の色がCSSで設定されます。</p>
</div>

外部ファイルCSSの記述例

@charset "utf-8";
#font-big { font-size: 20px;}
.font-red { color: red;}

ブラウザ表示例

div要素にclass属性でfont-bigと名前をつけ文字の大きさを少し大きくしています。

div要素で囲まれた範囲で文字の大きさがCSSで設定されます。

div要素にclass属性でfont-redと名前をつけ文字の色を赤にしています。

div要素で囲まれた範囲で文字の色がCSSで設定されます。

HTML文字 関連記事