パソコンとまねきねこ

CSSの記述のルール!セレクタの事を知ろう

CSSでスタイルを適用するセレクタ

CSSでスタイルを適用するためには、対象になる箇所を指定する必要があります。

その指定するものが「セレクタ」と呼ばれます。

h1 { color: #ffffff; } 

このCSSの記述一式をルールセットと呼びます、{}の中が「宣言」で「h1」の部分が「セレクタ」になります。

セレクタにはどんなものがあるのか

  • タイプセレクタ
  • 複数セレクタ
  • 名前を付けるセレクタ
    • idセレクタ
    • classセレクタ
  • 子孫セレクタ

タイプセレクタ

タイプセレクタは基本となるセレクタで、セレクタはHTMLの各要素のタグを記述します、セレクタで指定したタグと同じ要素すべてに指定したスタイルが適用されます。

HTMLに以下のように記述をして、「h1」にタイトル、「h2」に見出し、「p」に内容的なものを書きました。

これらに対して文字色を変更してみたいと思います。

文字の色を変更する記事のHTMLの記述の元

これを普通にブラウザに表示すれば文字色は黒いままです。

HTMLで記述したものをブラウザに表示したもの

CSSに「p」に対してcolorを赤に指定します。
「p」がここでのセレクタになります。

文字の色を赤に帰るCSSの記述

「p」に対して赤色を指定するとHTML内のすべての「p」に対して指定が適用されます。

色を変えたブラウザの表示

複数のタグに指定するセレクタ

同時に違うタグに対して、同じスタイルを指定したい時に使用します。

注意する点は「,(カンマ)」で区切って指定します。
h1とh2を同時に指定したい時はカンマで区切って指定してください。

h1とh2の色を緑にする記述

HTML内に記述しているh1、h2タグに対してすべて適用されます。

h1とh2の色が緑になった表示

idとclass セレクタ名を付けて選択できる

HTMLタグの中でここだけは違う見た目にしたい時に使用します。

idタグ 名前は被ることができない

idタグはHTML内に一度しか登場しない名前を付けるものです、様々なHTMLタグにつけることができますが名前は重複しないようにしなければいけません。

h2の一つに「id="blue"」と名前を付けて

idタグを使った記述の例

CSSで色を青に指定してみましょう、idを指定する時は「#(シャープ)」を記述した後にセレクタを記述します。

idのCSS記述の例

複数あるh2の中からidで名前を付けた部分の色が変更されました。

h2の一つが変更されたブラウザの表示結果

class 複数のタグに同じ名前が使える

class属性はHTMLの中で複数のタグに同名の名前を付けることができます、違う要素に同じCSSを指定することができます。

classを使ったセレクタの記述

class名を同じくすることで別々の要素を簡単に指定することができCSSの記述もスッキリします。

CSSの記述の例

同じ見出しや段落には色の指定がなされていない事が分かります。

classを使った色の指定の表示結果

classの利点

classなら同じ名前を使用できるので共通のCSSをつけたい要素に同じ名前を付ければいいのです。

一括でスタイルが指定出来たり変更出来たりすることは工程が少なくなり効率的に作業ができるようになります。

idは同じ名前を使えない?

なぜ「idタグ」は同じ名前を複数使用できないのでしょうか?

HTMLに別の要素に対して同じ名前を付けてみました。

同じ名前でCSSを指定してみましたが

結果としては普通に指定したスタイルは適用されました。

なぜ複数設定はいけないのか

Web制作を勉強していくうえでサイトに動きをつけるためにJavascriptやjQueryといったものを勉強することになりますが、その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は複数でもOK
  • 同じ要素にidとclassを書いてもOK
  • 同じCSSが書かれた場合はidとclassではidが優先される
  • class名を使っていればOK

子孫セレクタ

要素内にある特定の要素を指定できるセレクタです。

HTMLの中にある親要素の中にある特定の子要素だけにピンポイントでスタイルを指定したい時に使用します。

これをCSSで記述する時の注意点は親要素と子要素の間を半角スペースで区切ります。

親要素のdivのidと子要素のh3を指定して文字色を赤色に指定します。

「見出し2」のみ文字が赤に変更されています、このように要素内の特定の要素を指定できるのが「子孫セレクタ」です。

記述は親要素と子要素の間は半角スペースを空けます。

CSSの記述には優先順位があります

先にも少し述べましたがCSSには記述したスタイルは上から順に読み込まれ、最後に読み込まれたものが優先されます。

divのh1に対して色を設定していきます。

このように同じスタイルを設定したときは最後に設定した色が適用されます。

このようにタイトルは青になりました、指定には優先順位があることを理解しておきましょう。

その他にもセレクタの種類によっても優先順があります。

IDセレクタはclassセレクタよりも優先し
classセレクタはタイプセレクタより優先します

タグの中にstyle属性を使用している場合は、style属性がIDよりも優先します。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事