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>
すると、
と表示されます。
このように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>
そうすれば同じように表示されます。
ー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にしていきましょう。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー