今回の概要と目標
CSS入門講座2回目は、どの要素にスタイルを適用するのかを指定する基本的なセレクタについて学習しましょう。最終的には、下記のようにHTMLの文字色を変更できるようになることが今回の目標です。
セレクタとは
セレクタは、HTMLのどの要素にスタイルを定義するかを指定するものであり、現在のCSSには様々な種類のセレクタがあります。
複雑なセレクタに関しては今後のチャプターで紹介するとして、 今回はその中でも基本的なセレクタである、「 タイプセレクタ」と「 classセレクタ」、「 idセレクタ」の3つのセレクタについて見ていきましょう。
タイプセレクタ
タイプセレクタは「要素型セレクタ」とも呼ばれるセレクタで、 指定された全ての要素にスタイルを適用するセレクタになります。
タイプセレクタの指定方法は、セレクタ部分に、スタイルを適用したい要素名を記述すればOKです。
例えばページ内にある全てのp
要素の文字の色を変更したい場合は以下のようになります。
クラスセレクタ
クラスセレクタは特定の分類にスタイルを適用するのに便利なセレクタで、HTMLの
class
属性に指定された値に対してスタイルを適用するセレクタになります。
クラスセレクタの指定方法は、セレクタ部分にクラスセレクタであることを表す「
.(ドット)」を記述し、それに続けてスタイルを適用したいclass
属性の属性値(分類名)を記述します。
分類名は半角スペース区切りで複数指定可能。
例えばclass
属性に「
fruit」という分類名が指定されている要素の文字の色を変更したい場合は以下のようになります。
IDセレクタ
IDセレクタは特定の要素にのみスタイルを適用することができるセレクタで、HTMLの
id
属性に指定された値に対してスタイルを適用するセレクタです。
IDセレクタの指定方法は、セレクタ部分にIDセレクタであることを表す「
#」を記述し、それに続けてスタイルを適用したいid
属性の属性値(固有名)を記述します。
同一ページ内に同じ固有名のid属性があってはいけません。
例えばid
属性に「
apple」という固有名が指定されている要素の文字の色を変更したい場合は以下のようになります。
スタイルの優先度
CSSの優先順位は記述した順番ではなく、セレクタの種類によって決定されます。
例えば下記のようにCSSを書いた場合は、p
要素の文字の色は何色になると思いますか?
正解は「red」が適用されます。
CSSのセレクタは、タイプセレクタより、クラスセレクタの方が優先順位が高く、クラスセレクタより、IDセレクタの方が優先順位が高くなります。(同じセレクタの場合は、後から記述した方が優先度が高い)
なお、CSSではこのような適用する優先順位のことを、 詳細度と呼んでいます。
詳細度の具体的な解説は、今後様々なセレクタを紹介する際に行います。
- セレクタの使い分け
- 昔はレイアウトには IDセレクタ、装飾にはクラスセレクタを使ってデザインされているサイトが多かったですが、IDセレクタの多用は詳細度が高くなり、スタイルの上書きが困難となるなどのことから、最近では詳細度を一定に保つことを考慮して、クラスセレクタを中心にデザインすることが一般的です。
基本的なセレクタを使ってみよう
テキストエディタを開いて、下記の手順に従ってHTMLとCSSを作成してみましょう。
- テキストエディタを開く。
- 「Chapter02」フォルダ内の「index.html」を開く。
- 下記を参考に
head
要素内にlink
要素を追加し、「CSS」フォルダ内の「style.css」をリンクする。
- 上書き保存
- 下記を参考に、音楽好きの2人には「 music」という分類名を、ボブには「 bob」という固有名を指定する。
- 上書き保存
- 「Chapter02」 › 「css」フォルダ内の「style.css」をテキストエディタで開く。
- 下記を参考に CSSを記述
- 上書き保存
- 「Chapter02」 フォルダ内の「index.html」をブラウザで開く。
- 各セレクタに指定した色が適用されているかを確認(ボブの色は詳細度の高いidセレクタの色になっている)
コメント
CSSのコード内にコメント(メモ)を残すことができます。
コメントは「 /*」 〜「 */」の間に記述します。
コメントを使ってみよう
テキストエディタを開いて、下記の手順に従ってCSSを作成してみましょう。
- テキストエディタを開く。
- 「Chapter02」 › 「css」フォルダ内の「style.css」をテキストエディタで開く。
- 下記を参考に コメントを追加する。
- 上書き保存
練習問題
「Chapter02」 › 「quest」フォルダ内の「index.html」と「css」フォルダ内の「style.css」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。
まとめ
基本のセレクタは理解できましたか?
- タイプセレクタは、要素名を指定するセレクタ。
- クラスセレクタは、class属性の属性値に対してスタイルを指定する
- idセレクタは、id属性の属性値に対してスタイルを指定する