万能タグdivは「class属性」で使いこなそう div class－初心者が作る初心者の為のホームページ作成講座

　XHTML(HTML)をもっと理解しよう

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

ここで使うタグ

<div class="クラス名">～</div>

<div>の属性を指定する

ホームページのレイアウトの構築に使われている<div>は、<h>や<p>のような意味を持たず、空箱のようなタグですが、実はCSS（スタイルシート）と組み合わせることでホームページのデザイン性をアップさせる万能タグになります。
レイアウトを構築したときの「id属性」とほぼ同じ使い方をします。名前を付けるXHTML/HTML タグへ「class=" "」で好きな名前を付けます。
そして、CSS（スタイルシート）には「 . 」（ドット）に続けてクラス名を記入し、「 { } 」の中に指定したいCSS（スタイルシート）を書き込むことで、各<div>へ反映されます。

「id属性」、「class属性」の違い
「id属性」は1つのWebページ上に同じ「id名」を複数使うことはできませんが、「class属性」では、1つのWebページ上に、いくつでも同じ「class名」を使用することができます。
しかし、使用数によって「id属性」と「class属性」を使い分けるというわけでなく、タグに名前を付けるときは「id属性」、種類分けには「class属性」という使い分けが良いです。
そんなこと言われてもよくわからないって方はすべて「class指定」を使えば、とりあえずは問題はありません。

今回はクラス名をmenuとして紹介していきます。
XHTML/HTMLには<div class="menu">メニュー</div>と入力し
CSS（スタイルシート）では.menu{ }と入力して下さい。

まだCSS（スタイルシート）に何も指定してないのでこんな感じです。

ホームページ　ソース

XHTML(HTML)

<div id="box-1">
<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト　テキスト　テキスト　テキスト　テキスト　テキスト
</div>

<div id="box-3">
<h2>h;2 ページタイトル</h2>
<p>テキスト　テキスト　（省略）</p>

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

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

<div id="box-4">
copyright (c) ～～～.com All right reserved.
</div>

</div>

</body>

</html>

CSS（スタイルシート）

#body {
      width :800px ;
      border: 1px solid #9acd32;
      }

#box-1 {
      border-bottom: 1px solid #9acd320;
      background-image: url("img/top.png");
      }

#box-2 {
      float : left;
      width :200px;
      }

#box-3 {
      float : right;
      width :600px;
      }

#box-4 {
      clear: both;
      width: 800px;
      background-color : #9acd32;
      }

.menu { }

← 前のページ　次のページ→

初心者が作る
初心者さんの為のホームページ作成講座

XHTML(HTML)をもっと理解しよう