一覧へ戻る

CSSのセレクタ

: セレクタ、それはCSSを勉強する上で外せない基礎の基礎だ。これを理解しておかないと、CSSの便利さは3割減だ。きっちり勉強しとこう。
: セレクタ？また難しそうな話ですね？
: バカヤロウ！告白するより簡単だ！何ヶ月も悩んで決心して、心臓バクバクさせながら告白したら「いい友達でいようね」なんて返事が返ってくることもないし、次の日に気分転換しようと思ってぶらついたら、知り合いとその娘が歩いてたなんてこともない！それぐらいセレクタは簡単だ！
: なんか別の意味で大変というか、例えになっていないというか。
ようするに、セレクタは簡単だということでいいんでしょうか。
: そういうこと。ではセレクタの説明いってみよう。

セレクタとは？

body { color:#336666; }

これは「<body>～</body>の間の文字色を＃336666にします」というCSSの命令文。

このbodyと指定してる部分、つまり何に{ }内のCSS命令を適用するか選択（セレクト）する部分をセレクタと呼びます。

上の例では<body>というHTML要素をセレクタに選びました。これと同じように他のHTML要素をセレクタにすることができます。例えば・・・

p { color:#336666; }

で囲んだ部分（段落・文章）の文字色を#336666にする。

a { color:#336666; }

<a> </a>で囲んだ部分(リンクした部分)の文字色を#336666にする。

こんな感じでHTMLの要素をセレクタにして、CSSの命令を書いていきます。HTMLでは必ず< >で囲みますが、セレクタにする時は< >を取って入力することに注意する。

HTML要素の属性に割り当てたクラス名をセレクタに選ぶことができる。

例えばHTMLのに「test」という名前のクラス名を割り当てたする。

<p class="test">クラス名をつけた段落</p>
<p>クラス名をつけてていない段落</p>

このclass="test"とクラス名をつけたの文字色を変更したい場合は、次のようにCSSで指定する。

.test { color:#336666; }

実際にためしてもらうとわかるけど、クラスを使って上のように指定すると、class="test"で「test」というクラス名をつけたの文字色だけが変わる。

クラスにCSS命令を適用させたい時は、クラス名の前に半角の「.」が入っていることに注目。この「.」が有るか無いかでクラス名なのかHTMLの要素名なのかを判別させているわけ。

クラスと同じように属性に設定したID名をセレクタに選ぶこともできる。

例えばトップページでニュースを書くスペースとして、の属性にid="news"を割り当てたとする。

<p id="news">ニュースを書く段落</p>
<p>ほかの文章</p>

このid="news"を割り当てた部分の色を変えたい時はセレクタを次のように入力する。

#news { color:#336666; }

クラス名の時は「.」をつけたけども、ID名の時には半角の「#」をつける。

: 上で説明した３つがセレクタの基本だ。
: つまりセレクタに選べるのは3つということですね？
: HTMLの要素に割り当てる、クラスに割り当てる、IDに割り当てる。これが基本。だけども、これだけじゃないぞ。もう少し高度なセレクタの選び方もある。
: ということは、この３つを憶えておくだけじゃ駄目なんですよね？
: いや、最初はこの３つで十分だ。この3つを使い分けるだけでもCSSは十分使えるから安心してほしい。次のページで紹介する「少し高度なセレクタ」を勉強すれば、より実戦的な使い方が学べるので、ぜひチャレンジしてくれ。
: せんせいも、フラれたからって落ちこまないでくださいね。
: ガンバリマス。