idセレクタ、classセレクタとは？：CSS入門
CSS入門（17）
そろそろ、CSSにも慣れてきたでしょうから、今回は、idセレクタ、classセレクタというワンランク上の書き方を覚えていただきたいと思います。
お話は、次の順番で進みます。
idセレクタ、classセレクタとは？
1：今までは、どのようにしていたでしょうか？
記事「CSSの書き方：CSS入門」で、次のように書いたのは覚えていらっしゃるかしら。えぇ、そうです。「適用先」→「何を？」→「どうする？」です。
この「適用先（セレクタ）」なんですけれども、今までは、みなさんどのようにしていらっしゃいましたか？
そうです。HTMLのタグを書いてきましたね。例えば、次のように、bodyとか、あるいは、h1、tableなどを書きました。
body { background-color: #ffffff; }
しかし、これが実は、HTMLタグ以外にも書くことができるのですよ。そしてそれが、idセレクタとclassセレクタという書き方なのです。
「なぜ、idセレクタとclassセレクタという書き方が必要なのか？」と疑問に感じると思いますが、理由は簡単、よりきめ細かな指定を行うために必要になるからです。
2：idセレクタの書き方
（01）
idセレクタは、次のように書きます。適用先は、「#（いげた）＋idセレクタ名」です。
#idセレクタ名 { 何を？:どうする？; }
はい、分かり難いですね。もう少し具体的に書いてみましょう。例えば、idセレクタ名を「i-name」として、marginをかける場合は次のように書きます。
#i-name { margin: 5px; }
（02）
しかし、この「#i-name」とは、何でしょう？・・・・・・えぇ、好きなように付けた名前なんですが、どこに適用されるのでしょうか？
今までは、HTMLタグが適用先でしたが、idセレクタ名を使う場合は、HTMLタグの側にも、idセレクタ名を設定してあげる必要があります。
（03）
例えば、<h1>タグに、この「#i-name」を適用したい場合は、次のように書きます。
<h1 id="i-name">〜</h1>
なかなか、使ってみないとイメージし難いと思います。とりあえず、ここでは、次の2つのことを覚えておいてください。
- idセレクタ名には、「#（いげた）」をつける。
- HTMLタグには、「id=""」と書く。
3：classセレクタの書き方
（01）
classセレクタは、次のように書きます。適用先は、「.（ピリオド）＋classセレクタ名」です。
.classセレクタ名 { 何を？:どうする？; }
はい、またもや分かり難いですね。もう少し具体的に書いてみましょう。例えば、classセレクタ名を「c-name」として、marginをかける場合は次のように書きます。
.c-name { margin: 5px; }
（02）
しかし、この「.c-name」とは、何でしょう？・・・・・・えぇ、好きなように付けた名前なんですが、どこに適用されるのでしょうか？
今までは、HTMLタグが適用先でしたが、classセレクタ名を使う場合は、HTMLタグの側にも、classセレクタ名を設定してあげる必要があります。
（03）
例えば、<h2>タグに、この「.c-name」を適用したい場合は、次のように書きます。
<h2 class="c-name">〜</h2>
なかなか、使ってみないとイメージし難いと思います。とりあえず、ここでは、次の2つのことを覚えておいてください。
- classセレクタ名には、「.（ピリオド）」をつける。
- HTMLタグには、「class=""」と書く。
ん？・・・何だか同じような話を繰り返していますね。
4：idセレクタとclassセレクタの違い
さて、idセレクタも、classセレクタも同じような内容が書かれていて、これでは、idセレクタとclassセレクタの違いがまったく分からないはずです。
idセレクタとclassセレクタは、次のように使い分けます。
idセレクタ | ページに一度しか使わない場合に用いる。 |
|---|---|
classセレクタ | ページで複数回使う場合に用いる。 |
例えば、<h2>タグだけでなく、<table>タグにも使う場合は、classセレクタを使います。
唯一、例えば、<h1>タグにしか使わないような場合は、idセレクタを使います。
なかなかすぐには理解できないかもしれませんが、少しずつ慣れていってください。数をこなすのが一番です。
現状、たとえ間違って使っても、表示上は問題が起こりません。怖れる理由はありませんから、とにかく試してみてください。
idセレクタを使ってみる
1：前回までのお話
（01）
前回は、font-size（%）で文字サイズを調整しました。
以下、前回までのCSSコードです。
2：HTMLタグの追加
（02）
例えば、背景を次のようにしたいと考えた場合、みなさんは、HTMLやCSSを使って、どのようにして実現するでしょうか。
HTMLタグを増やさないといけないので、なかなか答えを導き出すのは難しいかもしれませんが、ちょっと考えてみてください。
（03）
記事「グループ化 【<div>タグ】」で書いた、<div>タグは覚えていらっしゃるかしら。これは、<div>タグを使って行います。
まず、グループ化を行ってみてください。見た目では、<div>タグを付けても、特に変わらないはずです。
（04）
<div>タグは追加できたでしょうか？ちょっと、どこからどこまでをグループ化すればいいのか迷ったかもしれませんね。
「ここです」と教えられて覚えるより、自分で「あっちかな？こっちかな？」と試しながら覚える方が力になるので、試行錯誤してみてください。
頃合を見て、以下のHTMLコードを確認してみましょう。
（05）
次は、<div>タグに、idセレクタ名を付けておきましょう。それぞれ、「blog-info」、「blog-pre」と付けることにします。
3：idセレクタにCSSを指定する
（06）
それぞれのidセレクタ「blog-info」と、「blog-pre」にCSSを指定しましょう。次の4つの指定を入れています。
色や、間隔などは、好きなようにしていただいて構わないので、作成してみてください。
（07）
CSSができたら、ブラウザで表示してみましょう。おそらく、<h2>タグに付けていたmargin-topが邪魔になるはずです。
（08）
<h2>タグに付けていたmargin-topは、不要になったので削除しましょう。
CSSコードは、次のようになります。
idセレクタ名、classセレクタ名の付け方
idセレクタ名、classセレクタ名は、どのような名前でも良いというわけではありません。ルールに沿った名前にしてください。
- 英数字や、「-（ハイフン）」で作成しましょう。
- 特殊文字や、機種依存文字は、使わないようにしましょう。「_（アンダーバー）」も古いブラウザでは、使えない場合があります。
- 漢字も、もちろん使えません。
- 先頭の文字は、英字ではじめましょう。
- 長過ぎると鬱陶しいので、端的な長さにしましょう。
- 用途や位置が推測できる名前にしましょう。（header、navi、wrap、menu、main、entry、footerなど）
- 小文字を推奨します。
お詫び
実は、大変申し上げ難いのですが、記事「CSSファイルの外部読み込み」で記載していたHTMLコードに、間違いがありました。お恥ずかしい。
コピーしてお使いになっていた人は、<table>タグに余計な</tr>タグが入っているので、お手数ですが削除しておいてください。
すみませんでした。以後、気を付けます。（2008/04/27）
次回予告
次回は、段落のインデント【text-indent】について書きます。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
- idセレクタ、classセレクタとは？（この記事です）
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/27 更新日：2008/04/27
« 「文字サイズの変更【font-size】（2）」｜「段落のインデント【text-indent】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
こんにちは
XHTML
えーと、自信はないですけれども、
id属性を使わなくなるということはないような気が致します。
XHTML2.0でどうなっているのか分からないですけど。
たぶん。(・∀・;)
もしかして、name属性と混乱しているということはないかしら。
よくページ内の特定の箇所に移動するときのaリンクに
付けたりするname属性は、XHTMLで非推奨になりました。
そういうアクションは好ましくないということみたいです。
どうしても使いたい場合は、「id属性を使いましょう」
ということらしいです。
XHTMLへの移行は、それほどややこしくはなさそうです。
XHTML1.0 transitionalくらいから行えば、
それほど変わらないのではないかしら。
「Another HTML-lint」でチェックすれば、
http://openlab.ring.gr.jp/k16/htmllint/index.html
ほぼ、imgなどの「タグを閉じてね」というエラーくらいしか、
出ないような気がします。
気をつけるのは、xmlの宣言をわざと書かないとか・・・。
講座を書くほど詳しくはないんですよねー。(〃▽〃)てへ
混乱
でもねー、最近はじめて、そこまで理解できているなんて、
すごいなぁって思うんだなぁ。
私なんか、1年以上やっていて、まだよく理解できていないもの。
みんな頭いいよねー。（T-T）ずるい
そろそろ頭がグチャグチャしてきました。
特別の意味があるのではと
悩みましたが 何でもいいのですね。
試しにatama-fでやったらOKでした。
又色もかえてみたら表示されない色が
あるとわかりました。
「わかるところまで」が
私の到達目標なのであと少しだと
思います。
急勾配
コメントありがとうございます。
はい、blog-infoでもblog-preでも、
blog-sachiでも、何でもOKです。
んー、「atama-f」の「f」は何なんだろう・・・。(´Д｀;)
「f」・・・「festival」
「f」・・・「fruits basket」
「f」・・・「flower」
あ、でもIDセレクタ名は、場所とか役割が分かるような名前が、
良いようです。
表示されない色ですか？何でしょう？どんな色だったのかしら？
おっしゃっている通り、確かにこの辺から急激に難しくなっている
かもしれないですね。
でも、ここまで来るだけでも本当にすごいですよ。
それも、あっと言う間に！(oﾟωﾟo)
すべての色が表示されました。
今夜はさまざまな色にして遊びました。
ｆ・・・flower なんてさすがKumaCrowさんの
発想は違いますね。
強いて意味づけすればfreeだったらいいなとは
思いますが。
ホンとはｆとｊはキーポジションが楽だからと
いうだけです。
このぶんなら
もう少し先へ進めそうです。
肖りたい
コメントありがとうございます。
いろいろな色を試して、
気にいった色が見付かると、楽しいですよねー。
あら、さらに先に進むのですか。すごい。
そのモチベーションは、どこからくるのかしら。肖りたい。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/283-b73a0953
id指定って確か、XHTMLでは使わないんですよねぇ？
ぼくはHTMLもCSSもブログカスタマイズ程度しかやったことないのに、最近急にHTML、XHTML、CSSをまとめて勉強しはじめたもんで、頭ん中ぐちゃぐちゃです。
KumaCrowさん、どうか、そのうちXHTML講座なんかもやって下さい。