カテゴリ | タグ | 機能 | 共通属性 | 要素分類 |
---|---|---|---|---|
グループ化 | <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タグについてのページもご確認ください。