【学習必須】CSSはセレクタを理解しないと始まらない
CSSを学ぶ上でセレクタを理解することは必須となります。セレクタを確実に理解しておかなければ、HTMLにCSSでスタイルを当てることがうまくいかないからです。
今回は、そのCSSのセレクタについて詳しく解説していきます。セレクタを確実に理解して、上手にスタイルを当てれるようになりましょう。
記事の中では、様々なセレクタの使い方を紹介していますので、最後まで見逃さずに読んでください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSにおけるセレクタとは
まず、下記のCSSコードを参考にしていきます。
CSS
body {
background:#000000;
}上記のコードの場合、セレクタはbodyにあたります。
backgroundはプロパティ、#000000は値です。
セレクタは、HTMLのどの要素にCSSを適用するかということを指定します。
この場合は、body全体ということです。プロパティは何を指定するか、値はどのように指定するかということを意味します。
上のコードは、bodyにbackground（背景）を#000000（黒）で指定するという意味です。
セレクタの種類
実際に使用可能なセレクタの種類を紹介します。なお、セレクタはHTML上に存在する要素を指定しないと機能しません。
例えば、h3と記述しても、HTML上にh3が無ければ意味がありません。
スペルミスにも気をつける必要があります。例え1字でも間違っていれば機能しません。
それでは、セレクタの種類の詳細を解説します。
要素名
HTMLの要素名で指定する形式です。bodyのように、ページに一つしか存在しない要素を指定するときに使います。
また、ページ内にいくつもある要素に、一括でスタイルを指定したいときも便利です。
CSS
a {
color:#ff3300;
}上記のように記述すると、CSSを読み込んでいるページ内のすべてのテキストリンクの色が赤くなります。
全称セレクタ（アスタリスク）
全称セレクタ（アスタリスク）は、ページ内すべての要素を対象とするという意味です。ユニバーサルセレクタともいいます。
最初に、すべての要素に適用させたい共通のスタイルなどを記述するときに用いられます。
CSS
* {
line-height:140%;
}これで、すべての要素の行間が140%に指定されたので、後から個別に指定する必要がありません。また、デフォルトのスタイルを一度リセットしたいときにも用いられます。
例として、
CSS
* {
margin:0;
padding:0;
border:none;
}このように最初に記述しておくと、すべての要素の余白が0、ボーダーが無しに設定されるので、コーディングがしやすくなります。
デフォルトで不便な設定が入っている要素があった場合は、最初にリセットしておくとよいでしょう。
クラス名
特定のクラスが割り当てられた要素にのみ、スタイルを適用出来るセレクタです。
CSSはクラス名の前に「.」をつけて記述します。
HTML
<p>サンプル</p>
<p class=”sample”>サンプル</p>CSS
.sample {
color:#ff3300;
}このように記述すると、2行目のクラス「sample」が割り当てられたテキストのみ、color（テキストの色）が#ff3300（赤）になります。
クラス名は任意で設定可能ですが、HTML側とCSS側のクラス名は同じにしなければなりません。ここでのスペルミスが多いので注意が必要です。
以下のような記述法もあります。
HTML
<h2 class=”sample”>サンプル1</h2>
<p class=”sample”>サンプル2</p>CSS
p.sample {
color:#ff3300;
}これは、クラス「sample」が割り当てられたp要素にスタイルを適用するという記述で、2行目のp要素にしか効きません。1行目もクラス名は「sample」ですが、要素がh2なのでp要素の「sample」という条件から外れるのです。
ID名
クラス名と似たセレクタで、特定のIDが割り当てられた要素にスタイルを適用します。CSSはID名の前に「#」を記述します。
HTML
<h1>サンプル1</h1>
<p id=”sample”>サンプル2</p>CSS
#sample {
color:#ff3300;
}これで、ID「sample」が割り当てられた2行目のみが赤くなります。
なお、IDは原則としてHTMLのページ内に一つのみの使用が推奨されています。ページ内で同一のIDを何度も使用するというソースも記述できてしまいますが、推奨されていない方法なので、避けてください。
異なるID名であれば、ページ内で何度も使用することが可能です。
疑似要素
特定の要素の中の一部に対して、スタイルを適用できるセレクタです。最初の文字、最初の行、直前、直後などがあります。
HTML
<p>サンプル</p>CSS
p:first-letter {
color:#ff3300;
}「first-letter」は最初の1文字という意味です。要素名との間に「:」を記述します。要素名でなく、クラス名やID名でも適用可能です。
これで、p要素の最初の文字「サ」が赤くなります。最初の行を指定する場合は、first-lineと記述します。
直前、直後はbeforeとafterです。
HTML
<p>サンプル</p>CSS
p:before {
content:”「”
}
p:after {
content:”」”
}これで、テキストがかぎかっこで囲われるようになりました。「content」には画像の指定も可能で、アイコンを表示させたいときなどによく使われています。
疑似クラス
特定の状態にある要素に、スタイルを適用するセレクタです。まず、もっとも良く使われているのが、ホバーの設定です。
HTML
<p><a href=”リンク先のURL”>サンプル</a></p>CSS
a:hover {
text-decoration:underline;
}「hover」は、マウスカーソルが乗っている状態という意味です。
疑似要素と同じく、要素名との間に「:」を記述します。「text-decoration」は文字の装飾で、「underline」は下線です。これで、マウスカーソルが要素の上に乗っている時に、テキストの下に線が出るようになりました。
「hover」の他に、「visited」や「active」がよく使われます。「visited」は訪問済みという意味で、リンク先のページにすでにユーザーがアクセスしたことがある場合に、テキストの色を変えるときに使われます。「active」はクリック中という意味で、オンマウスでなく、マウスが押されたときに効果をつけたいときに使われます。
疑似要素は、複数の要素の中から、特定のものだけを指定したいときにも便利です。
HTML
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>CSS
ul li:first-child {
color:#ff3300;
}「first-child」は最初の要素という意味で、ul要素の中の1番目のリスト1だけが赤くなります。指定できるのは最初だけではありません。
HTML
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>CSS
ul li:nth-child(3) {
color:#ff3300;
}これで、リスト3が赤くなります。()内の数字で何番目の要素にスタイルを適用するか指定できるのです。以下のような指定もできます。
HTML
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
</ul>CSS
ul li:nth-child(even) {
background:#cccccc;
}「even」は偶数です。偶数番目にあたるリスト2とリスト4だけ、背景が#cccccc（グレー）になります。リストや表など、文字列が何行にも渡り、見づらいときなどに大変便利です。ちなみに、奇数は「odd」です。
子孫セレクタ
要素の中の要素というように、階層で指定することもできます。
HTML
<body>
<div>
<p>サンプル</p>
</div>
</body>CSS
body div p {
color:#ff3300;
}各セレクタの間を、半角スペースで空けます。このようにすることで、body要素の中のdiv要素の中のp要素という指定が出来るのです。
HTML
<body>
<p>サンプル</p>
</body>このように、p要素がdiv要素に入っていない場合は、このスタイルは適用されません。特定の範囲内にだけ、スタイルを適用させたい時に便利です。また、長くサイトを運営していると、気付かずに同じクラス名を使用してしまうことがあります。そうした時も適用範囲を指定しておけば、意図せぬところにスタイルが効いてしまうこともなくなります。
子セレクタ
子孫セレクタよりも、厳格な指定ができるセレクタです。
HTML
<body>
<div>
<p>サンプル</p>
</div>
</body>CSS
body > div > p {
color:#ff3300;
}このように、セレクタとセレクタの間に「>」を記述します。これでbody要素の直下のdiv要素の直下のp要素という指定になります。
HTML
<body>
<div>
<div>
<p>サンプル</p>
</div>
<div>
</body>この場合は、div要素が2つになり、body要素の直下のdiv要素の直下のdiv要素の直下のp要素となるので、スタイルが適用されません。子孫セレクタよりも、ピンポイントの指定を行いたい時に使えます。
複数のセレクタ
要素をひとつずつ指定していては、CSSが長くなりすぎてしまうことがあります。同じスタイルであれば、一括で指定してしまう記述法がおすすめです。
HTML
<h1>サンプル1</h1>
<p id=”sample1”>サンプル2</p>
<h2 class=”sample2”>サンプル2</h2>CSS
h1 , p#sample1 , h2.sample {
color:#ff3300;
}セレクタとセレクタの間に「,」を入れることで、複数のセレクタに同時にスタイルを適用出来るようになるのです。
上のコードではh1要素とID「sample1」が割り当てられたp要素、クラス「sample2」が割り当てられたh2要素を指定しているので、3行すべてが赤くなります。同時に指定できる要素の種類は問いません。
CSSのセレクタの記述方法：まとめ
何気なく記述されることが多いセレクタですが、CSSとHTMLとを繋ぐ、とても重要な役割を持っています。また、疑似要素や疑似クラスなどを使いこなせるようになれば、コーディングの応用の幅が各段に広がります。
セレクタをマスターして、わかりやすいCSSコーディングができるようになりましょう。
