IDとClassの設定

IDとClassの役割と両者の違い

idとclassは共にタグに名前を付けるのに使います。

例えば、<p>タグが二つ並んでいる場合を考えてみてください。

<p>A</p>
<p>B</p>

AとBに別のスタイルを適用したいとしても

p {
	font-size:14px;
	}

してしまうと同じスタイル（文字の大きさが14px）が適用されてしまいます。

そこで、二つのpを分けるために、aさんとbさんというように名前を付けてあげます。

<p id="a">A</p>
<p id="b">B</p>

id="a"と付けられたpタグは、aという名札を付けた特別なpタグというわけです。

もう一つのclassというのもidと同じ目的で使われますので、classを使う場合は、class="a"とすればOKです。

idとclassの違いは、使用回数に制限があるかないかであり、1つのページ（htmlファイル）で1度しか使わない場合はid、2度以上使う場合はclassというふうに使います。

1つのhtmlファイル内で、

<p id="a">A</p>
<p id="b">B</p>
<p class="c">C1</p>
<p class="c">C2</p>

は可能ですが、

<p id="a">A</p>
<p id="b">B</p>
<p id="c">C1</p>
<p id="c">C2</p>

はid="c"を2回使用しているので不可ということです。

個別にスタイルを適用する

このような、idやclassで名前の付けられたタグに対して、個別にスタイルを適用する場合、idを使うときはp#aのように、タグと名前の間に"#"を挟み、classを使うときはp.aのように".（ドット）"を挟んで指定します。

p#a {
	color:#000; */ pにid=aを指定したとき /*
	}
p.a {
	color:#000; */ pにclass=aを指定したとき /*
	}

htmlファイルにid,classを付ける

先ほどのhtmlファイルのいくつかのタグにidとclassを設定します。

""の中の名前は、当講座では"a1"、"a2"のような名前を付けておりますが、一般的には、"menu"とか"submenu"とかそのタグの目的に合わせてわかりやすい名前を付けていることが多いです。

まぁ、管理人はいつもa1、a2のような名前しか付けませんけど・・・（これが一番わかりやすいと思うため）。

<html>
<head>
<title>ホームページ作成講座</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<h1><a href="index.html"><img src="gif/7.gif" alt="ホームページ作成講座" /></a></h1>
<p id="a1">｜<a href="index.html">HOME</a>｜<a href="#">Lesson1</a>｜<a href="#">Lesson2</a>｜<a href="#">Lesson3</a>｜<a href="#">Lesson4</a>｜<a href="#">Lesson5</a>｜</p>
<p><img src="gif/6.gif" alt="境界画像" /></p>
<p id="a2">>>　ホームページ作成講座TOP</p>
<h2>INFORMATION</h2>
<ul id="d1">
<li>ホームページを更新しました。</li>
<li>ホームページを終了しました。</li>
</ul>
<h2>Lesson1：メモ帳を起動してみよう！</h2>
<p class="a3">ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。</p>
<p class="a3">Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。</p>
<p class="a3">さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。</p>
<h2>LLesson2：タグを書いてみよう！</h2>
<p class="a3">ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。</p>
<p><img src="jpg/1.jpg" alt="メモ帳に記述" /></p>
<h3>＜文字の大きさを変える＞</h3>
<p class="a4">文字の大きさは、font sizeタグを使用します。</p>
<h3>＜文字の色を変える＞</h3>
<p class="a4">文字の色は、colorタグを使用します。</p>
<p class="a3">ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。</p>
<address>Copyright 2007@nkdesk. all right reserved.</address>
</body>
</html>

Lesson4～スタイルを細かく指定する～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>