CSSの記述のルール!セレクタの事を知ろう
CSSでスタイルを適用するセレクタ
CSSでスタイルを適用するためには、対象になる箇所を指定する必要があります。
その指定するものが「セレクタ」と呼ばれます。
h1 { color: #ffffff; }
このCSSの記述一式をルールセットと呼びます、{}の中が「宣言」で「h1」の部分が「セレクタ」になります。
セレクタにはどんなものがあるのか
- タイプセレクタ
- 複数セレクタ
- 名前を付けるセレクタ
- idセレクタ
- classセレクタ
- 子孫セレクタ
タイプセレクタ
タイプセレクタは基本となるセレクタで、セレクタはＨＴＭＬの各要素のタグを記述します、セレクタで指定したタグと同じ要素すべてに指定したスタイルが適用されます。
HTMLに以下のように記述をして、「h1」にタイトル、「h2」に見出し、「ｐ」に内容的なものを書きました。
これらに対して文字色を変更してみたいと思います。
これを普通にブラウザに表示すれば文字色は黒いままです。
CSSに「ｐ」に対してcolorを赤に指定します。
「ｐ」がここでのセレクタになります。
「p」に対して赤色を指定するとHTML内のすべての「p」に対して指定が適用されます。
複数のタグに指定するセレクタ
同時に違うタグに対して、同じスタイルを指定したい時に使用します。
注意する点は「，(カンマ)」で区切って指定します。
h1とh2を同時に指定したい時はカンマで区切って指定してください。
HTML内に記述しているh1、h2タグに対してすべて適用されます。
idとclass セレクタ名を付けて選択できる
HTMLタグの中でここだけは違う見た目にしたい時に使用します。
idタグ 名前は被ることができない
idタグはHTML内に一度しか登場しない名前を付けるものです、様々なHTMLタグにつけることができますが名前は重複しないようにしなければいけません。
h2の一つに「id="blue"」と名前を付けて
CSSで色を青に指定してみましょう、idを指定する時は「＃(シャープ)」を記述した後にセレクタを記述します。
複数あるh2の中からidで名前を付けた部分の色が変更されました。
class 複数のタグに同じ名前が使える
class属性はHTMLの中で複数のタグに同名の名前を付けることができます、違う要素に同じCSSを指定することができます。
class名を同じくすることで別々の要素を簡単に指定することができCSSの記述もスッキリします。
同じ見出しや段落には色の指定がなされていない事が分かります。
classの利点
classなら同じ名前を使用できるので共通のCSSをつけたい要素に同じ名前を付ければいいのです。
一括でスタイルが指定出来たり変更出来たりすることは工程が少なくなり効率的に作業ができるようになります。
ｉｄは同じ名前を使えない？
なぜ「ｉｄタグ」は同じ名前を複数使用できないのでしょうか？
HTMLに別の要素に対して同じ名前を付けてみました。
同じ名前でCSSを指定してみましたが
結果としては普通に指定したスタイルは適用されました。
なぜ複数設定はいけないのか
Web制作を勉強していくうえでサイトに動きをつけるためにJavascriptやjＱueryといったものを勉強することになりますが、そのjavascriptでもCSSセレクタ同様に「どの要素に対して動きをつけるか」というような記述をする場合があります。
そのセレクタに指定する要素が「id」だとコンピューターの処理速度が速くなるそうなので利用しています。
javascriptの関数の中に指定した「id」を持つ要素を取得するという関数があります。
「.getElemenById('')」この関数の括弧の中のクォーテーションの中にid名を入れます。
このように同じid名が複数ある場合にはどの要素を指定するのかが分からない状態になります。
このような観点からid名は同一のページには複数は付けられない事になります。
idとclassどちらを使えばいいのか
idはclassよりもCSSの優先度が高い
idはclassよりもCSSに記述した場合に優先度が高くなります。
同じ見出しに両方を指定した場合「id」が優先されて
見出し1は青色になります、idが優先されclassは適用されません。
他にもこんなことが
idをたくさん使うとidを付けた要素のCSSの優先度が高くなってidを付けた要素に対してCSSを適用する時に反映しにくくなる。
別の要素に対して同じCSSを適用したい場合にidでは同じ名前が使用できないので、別のid名を用意して同じCSSのコードを記述しなければいけません。
idとclassを簡単に説明すると
- idとclassは特定の要素にCSSを適用するための名前付けの役割
- idはページに一つclassは複数でもＯＫ
- 同じ要素にidとclassを書いてもＯＫ
- 同じCSSが書かれた場合はidとclassではidが優先される
- class名を使っていればＯＫ
子孫セレクタ
要素内にある特定の要素を指定できるセレクタです。
HTMLの中にある親要素の中にある特定の子要素だけにピンポイントでスタイルを指定したい時に使用します。
これをCSSで記述する時の注意点は親要素と子要素の間を半角スペースで区切ります。
親要素のdivのidと子要素のh3を指定して文字色を赤色に指定します。
「見出し2」のみ文字が赤に変更されています、このように要素内の特定の要素を指定できるのが「子孫セレクタ」です。
記述は親要素と子要素の間は半角スペースを空けます。
CSSの記述には優先順位があります
先にも少し述べましたがCSSには記述したスタイルは上から順に読み込まれ、最後に読み込まれたものが優先されます。
divのh1に対して色を設定していきます。
このように同じスタイルを設定したときは最後に設定した色が適用されます。
このようにタイトルは青になりました、指定には優先順位があることを理解しておきましょう。
その他にもセレクタの種類によっても優先順があります。
IDセレクタはclassセレクタよりも優先し
classセレクタはタイプセレクタより優先します
タグの中にstyle属性を使用している場合は、style属性がIDよりも優先します。
