このレッスンでは好きな場所にCSSを適用することができる
・idセレクタ
・classセレクタ
を中心に説明します。
前回学んだ要素セレクタはすべての指定要素にスタイルがあたるのに対し、２つのセレクタで細かくデザインを指定することができるようになります。
もくじ
セレクタについて
ちょっとだけ前回のおさらいです。
セレクタとはCSSを適用したい「どこ」にあたる部分で、h1やpなどの要素（タグ）を指定でき、これを要素セレクタと呼ぶのでしたね。
ただし、この要素セレクタには問題点もあります。
- 要素セレクタのデメリットとして、すべての要素にスタイルがあたるため、細かいデザインの指定ができない
たとえば段落をあらわすpタグに
p { color: red; }
と色を赤に指定すると、すべての<p>タグに適用されてしまいます。
もっと細かく、特定の場所だけデザインを変えたいときは、どうすればいいのでしょうか？
前回学んだように、インラインスタイルで指定してもいいのですが、１つ１つの要素にスタイルを書くのは面倒ですよね？
そんなときに登場するのが、idセレクタとclassセレクタなのです。
それぞれ書き方にルールがありますので、しっかり覚えておきましょう！
超ピンポイントで指定できるidセレクタ
htmlタグ内にすきな名前でidを指定して、スタイルを適用するのがidセレクタです。
<p>おはようございます！</p>
<p id="redText">こんにちは！</p>
<p>こんばんは！</p>#redText {
color: red;
}CSSの方で、idでつけた名前をセレクタで指定すると、そこにだけスタイルが反映されるようになります。
idセレクタの書き方のルールとして、セレクタ名の前に# (シャープ)をつけてやります。
idセレクタを使うときの注意点
ここで注意点なのが、id属性の名前（属性値）はそのhtmlファイル内で、１つだけしか使えないということです。
このように決まった範囲の中で、１つだけしか使ってはいけない、唯一のものをプログラミングの世界では、ユニークや一意と呼びます。
（以前inputタグのレッスンでも、name属性がユニークな属性として登場しています。）
id属性はユニークでなければいけないので、うっかり同じ名前をつけたり、複数の場所で指定したりしてはいけません。
そのため、それぞれのページに１つしか存在しないメニューやヘッダー、フッター部分などの箇所の指定にid属性が使われることが多いです。
このルールを守っておかないと、意図しない見た目になったり、予期せぬ動作を起こす可能性があるので、idを指定するときは気をつけてくださいね。
<p>おはようございます！</p>
<p id="redText">こんにちは！</p>
<p id="redText">こんばんは！</p>- idセレクタは、id名が一致したところだけに、ピンポイントでスタイルを適用する。
- idの名前（属性値）はそのhtmlファイルの中で１回しか使えない。
- スタイルシートでidを指定するには#id名（シャープ + idの名前）をセレクタに書く
好きなところに複数指定ができるclassセレクタ
つぎにclassセレクタについて見ていきます。
指定したタグすべてにスタイルがあてられる要素セレクタ、超ピンポイント（１つのhtmlファイル内で１つだけ）で指定するidセレクタに対し、好きなところにいくつでも指定ができ、使い勝手がいいのがclassセレクタです。
<p>おはようございます！</p>
<p class="blueText">こんにちは！</p>
<p class="blueText">こんばんは！</p>.blueText {
color: blue;
}２つのclass属性を指定した文にスタイルがあてられています。
スタイルシートでclass名の前に、. (ドット)を付けます。
タグ内に複数のクラス名を指定することもできる
１つのタグの中で、違うクラスのスタイルを適用することも可能です。
例として
・色をグリーンにするクラスgreenText
・フォントサイズを24ピクセルにするクラスbigFont
の２つのクラスを、’こんにちは！’のpタグで指定してみます。
.greenText {
color: green;
}
.bigFont {
font-size: 24px;
}<p>おはようございます！</p>
<p class="greenText bigFont">こんにちは！</p>
<p>こんばんは！</p>
このようにクラス属性に２つ以上指定するときは、クラス名を半角スペースで区切って並べていきます。
ちなみに、上記の方法でidとclass属性を、まぜて並べるということも可能です。
しかし、２つ以上のid属性を並べるのはルール違反となりますので、注意が必要になります。
- ピンポイントでスタイルを適用するidセレクタに対し、classセレクタはいくつでも好きな要素に指定できる
- スタイルシートでclassを指定するには.class名（ドット + classの名前）をセレクタに書く
- １つの要素の中に半角スペースを入れて、複数のクラスを指定することもできる
idやclassの名前のつけ方のポイント
id名やclass名は、半角英数字と’-‘ (ハイフン)、そして’_’ (アンダースコア)の組み合わせであれば、好きな名前で指定ができます。
ただ、あまりに自由すぎても無秩序な書き方になりがちなので、豆知識的にコーディングにおけるネーミングのセオリーについて触れていきましょう。
一般的に、名前は２〜３個の英単語の組み合わせで指定することが多いです。
例）redTextなど
これらの単語のつなげ方にはいろいろ種類がありますので、紹介していきます。
キャメルケース
単語の頭文字を、大文字にして見やすくしています。
プログラミングの世界でよく使われています。
また、キャメルケースにも２種類の書き方があります。
アッパーキャメルケース/ パスカルケース
RedText
FontWeightBold
のようにすべての単語の頭文字を大文字にする書き方を、アッパーキャメルケース、またはパスカルケースと呼びます。
ローワーキャメルケース
redText
fontWeightBold
のように最初の単語の頭文字を小文字ではじめて、２語目以降の頭文字は大文字にする書き方をローワーキャメルケースといいます。
コード食堂では、例としてコードを書くときは、このローワーキャメルケースを使っています。
スネークケース
red_text
font_weight_bold
のように、’_’ (アンダースコア)で単語同士をつなげる記法をスネークケース、またはそのままアンダースコアケースと呼びます。
たしかにちょっとヘビに見えなくもないですね。
チェーンケース
red-text
font-weight-bold
のように’-‘ (ハイフン)でつなぐのがチェーンケースです。
多くの会社では、「プログラミングはこの書き方、htmlはかならずこの記法で！」と明確にルールが決まっていて、これを命名規則といいます。
その会社で働く、またはお仕事をわけてもらう場合には、そのルールを守らなければいけません。
個人で開発する場合でも、名前のルールがめちゃくちゃだと、あとあと分かりづらくて大変になります。
自分が見やすいと思う、記法をどれでもいいので決めて書いていくと、きれいな規則正しいコードになるので、ぜひこの機会にネーミングも意識してみてくださいね。
全称セレクタ
もう一つセレクタとして、全称セレクタ（ユニバーサルセレクタ）についても触れていきます。
このセレクタは、すべての要素に対して、一括でスタイルをあてる 効果を持っています。
* {
color: red;
}
このように全称セレクタは * （アスタリスク）だけをセレクタに書くだけで、すべての要素にCSSが適用されます。
以前はこのセレクタが、CSSの設定をリセットをするなどの目的で用いられていたのですが、現在はCSSの読み込みが遅くなるなどの理由から、あまり推奨されていません。
影響力の大きいセレクタなので、「このようなセレクタも存在する」と、知識として頭の片隅においておくだけで大丈夫ですよ。
各セレクタの優先順位のちがい（詳細度）
最後にこれまで学んだセレクタの優先順位について、考えていきます。
この優先順位のことを、CSSの詳細度といいます。
この詳細度は計算式を使ってわり出されるのですが、CSSの中でとても奥の深い概念で、範囲が広くむずかしいところです。
このセクションでは、これまで学んだセレクタの種類ごとの強さにフォーカスをあてて、シンプルにまとめていきます。
さて、ここまで
・要素セレクタ
・idセレクタ
・classセレクタ
・全称セレクタ
についてふれてきました。
セレクタだけの詳細度を比較してみます。
セレクタの優先順位
左に行くほど、優先度が高く、スタイルが反映されるという順番になっています。
セレクタだけ見たらそんなにむずかしくなさそうですが、これに前回学んだ、インラインスタイルや上流・下流の考えも入り交じることになります。
先ほどの順位に、セレクタではない、インラインスタイルや!importantを加えてみると
優先順位
となります。
サイトが大きくなってくると、「古いCSSのコードが邪魔をして、正しくスタイルを書いているのに見た目が変わらない」ということがよく起こります。
そんなときに、この詳細度を意識しながら、しらみつぶしに原因を特定していくことになりますので、この優先順位をきちんと理解するようにしてください。
まとめ
- 好きな場所にスタイルを適用するためには、idセレクタかclassセレクタを使って指定する
- id名やclass名は半角英数字とハイフン、アンダースコアが使うことができ、いくつかの記法が存在する
- *（アスタリスク）で指定したセレクタを全称セレクタと呼び、すべての要素が対象となる
- それぞれのセレクタには優先順位があり、これをCSSの詳細度という
さて、このレッスンでは好きな場所にスタイルを指定する、idセレクタ、classセレクタの書き方について詳しく見てきました。
実際の現場では、CSSの指定については、classセレクタのほうが圧倒的に多く使われています。
ある程度CSSに慣れるまでは、とりあえずclassセレクタを使っておけば問題ありませんよ！