idとclassでスタイルを指定する

2013年3月23日：CSS

ある文字を赤色にしたいとか、大きくしたいとかがスタイルで簡単に設定できたら便利です。

そこで、idやclassを使用します。 これらを使用することで、好きなスタイルを選ぶことができます。

idやclassの使い方や使い分けについて解説します。

文字の色を好きに設定できるようにする

では、文字の色を好きに設定できるようにCSSをつくります。 今回は、以下のようにCSSを作りました。

.red{color:#FF0000}
.blue{color:#0000FF}
.yellow{color:#FFFF00}

これで赤、青、黄色で色を設定できます。例えば、以下のようにHTMLファイルを作ります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>
<span class="red">red</span>,
<span class="blue">blue</span>,
<span class="yellow">yellow</span>
</p>
</body>
</html>

すると、

 

red, blue, yellow

 

と表示されます。

このようにclassを使うことで、デザインの設定が簡単にできます。

idとclassの使い分け

以上のことをclassではなくてidで行う場合は、

#red{color:#FF0000}
#blue{color:#0000FF}
#yellow{color:#FFFF00}

のように「.」ではなく「#」を用います。

そして、HTMLでは「class」ではなく「id」とします。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>
<span id="red">red</span>,
<span id="blue">blue</span>,
<span id="yellow">yellow</span>
</p>
</body>
</html>

そうすれば同じように表示されます。

 

red, blue, yellow

 

ーclassとidは同じじゃないか？ と思われたでしょう。しかし、classとidには差があります。それは

  • idはHTMLに1回だけ現れる
  • classはHTMLに何回現れてもいい

という違いです。

idの場合は、ヘッダーやサイドバーやフッターのようにHTMLに一回だけ現れます。

一方、classは何度でも現れてもOKです。

ですから、先ほどの文字を赤くする場合は、classを使うべきなのです。

 

idを使わずにclassだけを使えばいいのでは、 とおもわれる方もいるでしょう。

確かにclassだけを用いてもいいのですが、

idを用いるとidの部分へリンクを張ることができます。

例えば

<a href="#footer">フッターへ</a>

という風にすればid=”footer”の部分へ飛ぶことができます。

あと、idを使うことでHTMLが見やすくなるという効果もあります。

idとclassを使い分けることで、論理的なHTMLにしていきましょう。

著者：安井 真人(やすい　まさと)

TOP