万能タグdivタグは「class属性」で使いこなそう--人気ホームページが作れる簡単作成講座

トップページ　＞　初心者講座　＞　

万能タグ<div>は「class属性」で使いこなそう

４－４　万能タグ<div>は「class属性」で使いこなそう

ホームページのレイアウトの構築に使われている<div>は、<h>や<p>のような意味を持たず、空箱のようなタグですが、実はCSS（スタイルシート）と組み合わせることでホームページのデザイン性をアップさせる万能タグになります。

見だしにも、本分にもあたらないテキストは<div>

<div>カテゴリー１</div>

見出しや本文に当たらないテキストはそのまま記載しても良いですが、<div>タグを使うと、あとから色を変えたり背景色を付けたりするのに便利です。

クラス属性（class)で名前を付けて、CSS（スタイルシート）でデザインする

<div class="category">カテゴリー１</div>

.category {　　　}
↑先頭に「．」ドットを忘れずに

レイアウトを構築したときの「id属性」とほぼ同じ使い方をします。
名前を付けるXHTML/HTML タグへ「class=" "」で好きな名前を付けます。

そして、CSS（スタイルシート）には「 . 」（ドット）に続けてクラス名を記入し、
「 { } 」の中に指定したいCSS（スタイルシート）を書き込むことで、各<div>へ反映されます。

「id属性」と「class属性」の使い分けは？

レイアウトの構築の時に出てきた「id属性」と、「class属性」は使い方や効果はほぼ同じです。

しかし、大きく違う点が一つあります。

「id属性」は1つのWebページ上に同じ「id名」を複数使うことはできませんが、「class属性」では、1つのWebページ上に、いくつでも同じ「class名」を使用することができます。

しかし、使用数によって「id属性」と「class属性」を使い分けるというわけでなく、タグに名前を付けるときは「id属性」、種類分けには「class属性」という使い分けが良いです。

そんなこと言われてもよくわからないって方は
すべて「class指定」を使えば、とりあえずは問題はありません。

ホームページソース

XHTML

<div id="a-box">

<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト　テキスト　テキスト　テキスト　テキスト　テキスト

</div>

<div id="b-box">

<h2>h2 ページタイトル</h2>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

</div>

<div id="c-box">

<div class="category">カテゴリー１</div>
<ul>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul>

<div class="category">カテゴリー２</div>
<ul>
<li>ページ４</li>
<li>ページ５</li>
<li>ページ６</li>
</ul>

</div>

<div id="d-box">

copyright (c) oooo.com All right reserved.

</div>

</div>

</body>

</html>

CSS（スタイルシート）

#site-box {
width : 750px;
border: 1px solid #FF9900;
}

#a-box {
border-bottom: 1px solid #FF9900;
background-image: url('img/header.gif');
}

#b-box {
float: left;
width: 500px;
}

#c-box {
float: right;
width: 250px;
}

#d-box {
          clear: both;
          width: 750px;
          background-color: #FFFF99;
}

.category {　　　}

＜＜前のページ　　次のページ＞＞

このページをブックマークする→　