class属性とid属性

DIV要素やSPAN要素に限らず、HTMLのほとんどの要素は、class属性とid属性というものが指定できます。

例えば、一つのHTMLファイルの中にh2要素の見出しが三つあったとします。 

<h2>見出し1</h2>
<p>・・・・・・
</p>

<h2>見出し2</h2>
<p>・・・・・・
</p>

<h2>見出し3</h2>
<p>・・・・・・
</p>
それぞれの見出しごとに、異なったデザイン、例えば「見出し1」は赤色で、 「見出し2」は青色、「見出し3」は緑色にしたい場合はどうすればいいでしょうか。 まず考えられるのがh2タグごとに、style属性を使って、 
<h2 style="color: red;">見出し1</h2>
<p>・・・・・・
</p>

<h2 style="color: blue;">見出し2</h2>
<p>・・・・・・
</p>

<h2 style="color: green;">見出し3</h2>
<p>・・・・・・
</p>

と書く方法です。

しかし、上の例は文字色だけの設定だから良いものの、背景色や文字のサイズも変えるなど、もっと複雑な条件だったらどうでしょうか。 さらにこんな形のHTMLファイルがいくつもあったとしたら大変です。せっかくですから外部CSSファイルを使った方法を覚えましょう。

そこで出てくるのがclass属性とid属性です。

class属性とCSS（スタイルシート）

まずはclass属性を使ってみましょう。

見出し1、見出し2、見出し3のH2要素ごとに、クラスの名前を決めます。クラス名は他の属性の「値」と一緒なので 半角英数字しか使えません。

ここではそれぞれ「midasi1」、「midasi2」、「midasi3」としました。

これらを使って書くと以下のようになります。


<h2 class="midasi1">見出し1</h2>
<p>・・・・・・
</p>

<h2 class="midasi2">見出し2</h2>
<p>・・・・・・
</p>

<h2 class="midasi3">見出し3</h2>
<p>・・・・・・
</p>

もちろん、これだけでは見出しの色は変わりません。

リンクしているCSSファイルを開いて、 
.midasi1 {
	color: red;
}
.midasi2 {
	color: blue;
}
.midasi3 {
	color: green;
}

と書けば、見出し1は赤色に、見出し2は青色に、見出し3は緑色になります。

ここで注意しないといけないのが、「midashi1」などの、クラスの名前の前に「.」(半角ドット)を 書かないといけないということです。

もし付け忘れると、

body {
	background-color: black;
	color: white;
}

の例と同じく、要素を指していることになり、「midasi1」要素を赤色にするということになってしまいます。 当然そんな要素は存在しないので、何も起こりません。

id属性とCSS（スタイルシート）

次はid属性について。これはclass属性とほとんど同じです。 さっきの例ですと、HTMLは 

<h2 id="midasi1">見出し1</h2>
<p>・・・・・・
</p>

<h2 id="midasi2">見出し2</h2>
<p>・・・・・・
</p>

<h2 id="midasi3">見出し3</h2>
<p>・・・・・・
</p>
と書きます。「class」の部分が「id」になっただけ。 CSSファイルのほうは、 
#midasi1 {
	color: red;
}
#midasi2 {
	color: blue;
}
#midasi3 {
	color: green;
}

になります。classとの違い、わかりますか？

classでは「.」を名前の前に付けていましたが、idでは「#」（半角シャープ） を付けなければいけません。

classは無制限、同じ名前のidは一度だけ

さらに、class属性とid属性の大きな違いがあります。 class属性は、同じ名前を一つのHTMLファイルの中で何度も使うことができますが、id属性は一回しか使うことができません。 どういうことかといいますと、 
<h2 class="midasi1">見出し1</h2>
<p>・・・・・・
</p>

<h2 class="midasi2">見出し2</h2>
<p>・・・・・・
</p>

<h2 class="midasi3">見出し3</h2>
<p>・・・・・・
</p>

<h2 class="midasi1">見出し1-2</h2>
<p>・・・・・・
</p>

<h2 class="midasi1">見出し1-3</h2>
<p>・・・・・・
</p>

<h2 class="midasi2">見出し2-2</h2>
<p>・・・・・・
</p>

上のような書き方は問題ないのですが、

<h2 id="midasi1">見出し1</h2>
<p>・・・・・・
</p>

<h2 id="midasi2">見出し2</h2>
<p>・・・・・・
</p>

<h2 id="midasi3">見出し3</h2>
<p>・・・・・・
</p>

<h2 id="midasi1">見出し1-2</h2>
<p>・・・・・・
</p>

<h2 id="midasi1">見出し1-3</h2>
<p>・・・・・・
</p>

<h2 id="midasi2">見出し2-2</h2>
<p>・・・・・・
</p>

これは間違いだということです。

HOME