HTMLやCSSの学習を始められたばかりで
・セレクタって何？
・セレクタの種類がたくさんあって覚えきれない。。
といった状況に陥っていませんでしょうか？
そこで、今回はCSSの書き方について
・セレクタとは？
・まず覚えるべきセレクタの種類5つ（初級編）
をご紹介いたします。
目次
セレクタとは？
セレクタ
CSSではHTMLの要素に対して様々なスタイルを指定することができます。
その際に「どの要素に」を、このセレクタで指定してあげることができます。
セレクタの基本的な書き方
まず、CSSの書き方についてですが、
「セレクタ」「プロパティ」「値」の組み合わせで構成されています。
- ・「プロパティ」→ 「何を」を指定します。
- ・「値」→「どのようにするか」を指定します。
- ・「セレクタ」→「どのHTMLに対してか」を指定します。
例を見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 |
// 基本的なCSSの記述例 p { color : red; } //上記のCSSの記述内容を分解してみましょう // ● プロパティ：「color」→「文字色を」指定します // ● 値：「red」→「赤色にする」を指定ます // ● セレクタ：「p」→「HMTLのpタグ要素に対して」指定します |
{ } 記号の内側で、プロパティと値を指定します。
そして、{ } 記号の前に記述しているのが「セレクタ」です。
改めて、本記事でこれからご紹介する「セレクタ」基本ルールを整理しますね。
- ・「HTMLのどこを装飾するか」を指定するもの
- ・記述する場所は、{ } 記号の前
セレクタの種類（基本編）
セレクタは、上記の例のように「pタグ」のような要素名での指定方法だけではありません。
他にもたくさんの方法があります。
その中でも今回は「初級編」ということで、セレクタの中でも特に初学者向けに覚えていただきたい5つに絞ってご紹介していきます。
また、セレクタの指定には「優先順位」というものがありますので注意が必要です。
詳しくは下記リンクを参照ください。
CSSが効かない！？確認すべきポイント3つを解説！-優先順位とは？
要素型セレクタ
「要素名で指定するセレクタ」です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 「p」の箇所が要素型セレクタです // 「pタグ」を指定します // 「pタグの 文字色を 赤く します」 p { color : red; } // 「div」の箇所がセレクタです // divタグを指定します // 「divタグの マージン上下左右を 20px とし、背景色を #CCCCCCに します」 div { margin : 20px; background-color : #cccccc; } |
全称セレクタ
「すべての要素を指定するセレクタ」です。
セレクタには「*」の記号を指定します。
|
1 2 3 4 5 6 |
// 「*」の箇所が全称セレクタです // 「全ての要素」を指定します // 「全ての要素の 文字色を #223344 にします」 * { color : #223344; } |
classセレクタ
「特定のclass名のある要素を指定するセレクタ」です。
|
1 2 3 4 5 6 |
// 「.class」の箇所がclassセレクタです // class名「sample」を持つ要素を指定します // 「class名sampleを含む要素の 文字色を 青色 にします」 .sample { color : blue; } |
idセレクタ
「特定のid名のある要素を指定するセレクタ」です。
|
1 2 3 4 5 6 |
// 「#demo」の箇所がidセレクタです // id名「demo」を持つ要素を指定します // 「id名demoを含む要素の 文字色を 黄色 にします」 #demo { color : yellow; } |
擬似クラス
この擬似要素は上記4つとは少し異なります。
「特定のある状況にある要素を指定するセレクタ」です。
例えば、マウスカーソルがホバーした時に、カーソルをポインター（指差す手の形）に変える、といった使い方ができます。
ここでは6つの擬似クラスについて、例と共にご紹介していきますね。
・要素名 :link
未訪問の状態にある場合に装飾を反映します。
|
1 2 3 4 5 |
// 未訪問状態のaタグに対して 文字色を 青色に します a:link { color : blue; } |
・要素名 :visited
訪問済みの状態にある場合に装飾を反映します。
|
1 2 3 4 5 |
// 訪問済みのaタグに対して 文字色を 緑色に します。 a:visited { color : green; } |
・要素名 :hover
カーソルがホバーしている場合に装飾を反映します。
|
1 2 3 4 5 6 |
// マウスカーソルがホバーしているaタグに対して カーソルを ポインター にします // （ホバー時のみ反映する） a:hover { cursor : pointer; } |
・要素名:active
クリック中の場合に装飾を反映します。
|
1 2 3 4 5 |
// クリック中のaタグの 文字色を 赤色に します a:active { color : red; } |
・要素名:focus
フォーカスされている場合に装飾を反映します。
|
1 2 3 4 5 |
// フォーカスされているinput要素の 背景色を 黄色に します input:focus { background-color : yellow; } |
・要素名:first-child
要素内の最初の要素だけに装飾を反映します。
|
1 2 3 4 5 |
//div要素の中の最初の要素だけ、 文字色を 赤く します div:first-child { color : red; } |
擬似クラスでしていする要素名は、「要素型セレクタ」だけではなく
「classセレクタ」や「idセレクタ」を指定することも可能です。
まとめ
いかがでしたでしょうか？
セレクタは他にもたくさんありますが、まずはご紹介した5つのマスターを目指しましょう！
以上、CSSのセレクタについて
・セレクタとは？
・ます覚えるべきセレクタの種類5つ（初級編）
についてご紹介しました。
次回では、中級編ということでさらに複雑な要素指定ができるセレクタについてご紹介いたします。
プログラミング学習を始めたばかりの方は、CSS理解のためにぜひ参考にしてみてください。
