divタグの書き方

☆説明

<div></div>で囲まれた部分をグループとして扱うことができます。グループ化したものをCSSで装飾をかける際に使用します。以下にHTMLの記述例とCSSの記述例を記載してあります。グループ化の使い方の参考にしてください。また、divでグループ化したものをfloatなどで、配置することでホームページのデザインを作ります。

まず、グループ化する範囲を＜div＞で囲います。次にダブルクォーテーション内に任意の文字を入力します。自分でわかる文字で構いません。次にCSSの記述になります。任意の文字の先頭に「＃」(シャープ)をつけます。そして、CSSの指定をする。

classを使う場合は、任意の文字の先頭に「.」(ドット)をつけます。

「id」はページ内に同じ名前は１つのしか使えません。「class」は複数使う事ができます。

idとclassについての詳細はidとclassの使い方を参照ください。

グループ化の練習
idは#を使う。



classは.を使う。

#blue{
	color:blue;
}
.red{
	color:red;
}

↓グループ化した範囲の文字がブルー及びレッドになります。簡単な例ですが、実際のWEB制作では、ボーダー（border:1px solid #ccc;など）を入れてボックスを作ったり、バックグラウンド（background:#fafafa;など）で色を変えたり、画像を設定したりします。
コンテンツを分類する為に利用する事が多いので、必ず覚えておきましょう。

divタグと同じような効果をするspanタグについても学習しましょう。spanタグについてのページもご確認ください。