divタグの書き方

DIV
カテゴリ タグ 機能 共通属性 要素分類
グループ化 <div> ブロックレベル要素をグループ化します。 id
class
ブロックレベル
使用例
<div id="任意の名前"></div>

☆説明

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

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

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

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

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


グループ化の練習

idは#を使う。

classは.を使う。


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

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

グループ化の練習

idは#を使う。

classは.を使う。

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