今回の概要と目標

CSS入門講座2回目は、どの要素にスタイルを適用するのかを指定する基本的なセレクタについて学習しましょう。最終的には、下記のようにHTMLの文字色を変更できるようになることが今回の目標です。

今回のゴール

RERUN

セレクタとは

セレクタは、HTMLのどの要素にスタイルを定義するかを指定するものであり、現在のCSSには様々な種類のセレクタがあります。

CSSの宣言
セレクタどこに {
  プロパティ: 値;
}

複雑なセレクタに関しては今後のチャプターで紹介するとして、 今回はその中でも基本的なセレクタである、「 タイプセレクタ」と「 classセレクタ」、「 idセレクタ」の3つのセレクタについて見ていきましょう。

タイプセレクタ

タイプセレクタは「要素型セレクタ」とも呼ばれるセレクタで、 指定された全ての要素にスタイルを適用するセレクタになります。

タイプセレクタの指定方法は、セレクタ部分に、スタイルを適用したい要素名を記述すればOKです。

タイプセレクタの指定方法
要素名 {
  プロパティ: 値;
}

例えばページ内にある全てのp要素の文字の色を変更したい場合は以下のようになります。

Chapter02/sample.css
p {
  color: red;
}

クラスセレクタ

クラスセレクタは特定の分類にスタイルを適用するのに便利なセレクタで、HTMLの class属性に指定された値に対してスタイルを適用するセレクタになります。

クラスセレクタの指定方法は、セレクタ部分にクラスセレクタであることを表す「 .(ドット)」を記述し、それに続けてスタイルを適用したいclass属性の属性値(分類名)を記述します。

class属性の指定方法
<要素名 class="分類名">

分類名は半角スペース区切りで複数指定可能。

classセレクタの指定方法
.分類名 {
  プロパティ: 値;
}

例えばclass属性に「 fruit」という分類名が指定されている要素の文字の色を変更したい場合は以下のようになります。

Chapter02/sample.html
<ul>
  <li class="fruit">りんご</li>
  <li>コーラ</li>
  <li class="fruit">いちご</li>
  <li>抹茶</li>
</ul>
Chapter02/sample.css
.fruit {
  color: red;
}

IDセレクタ

IDセレクタは特定の要素にのみスタイルを適用することができるセレクタで、HTMLの id属性に指定された値に対してスタイルを適用するセレクタです。

IDセレクタの指定方法は、セレクタ部分にIDセレクタであることを表す「 #」を記述し、それに続けてスタイルを適用したいid属性の属性値(固有名)を記述します。

id属性の指定方法
<要素名 id="固有名">

同一ページ内に同じ固有名のid属性があってはいけません。

idセレクタの指定方法
#固有名 {
  プロパティ: 値;
}

例えばid属性に「 apple」という固有名が指定されている要素の文字の色を変更したい場合は以下のようになります。

Chapter02/sample.html
<ul>
  <li id="apple">りんご</li>
  <li>コーラ</li>
  <li>いちご</li>
  <li>抹茶</li>
</ul>
Chapter02/sample.css
#apple {
  color: red;
}

スタイルの優先度

CSSの優先順位は記述した順番ではなく、セレクタの種類によって決定されます。

例えば下記のようにCSSを書いた場合は、p要素の文字の色は何色になると思いますか?

Chapter02/sample.html
<p id="apple" class="fruit">りんご</p>
Chapter02/sample.css
p {
  color: blue;
}

#apple {
  color: red;
}

.fruit {
  color: green;
}

正解は「red」が適用されます。

CSSのセレクタは、タイプセレクタより、クラスセレクタの方が優先順位が高く、クラスセレクタより、IDセレクタの方が優先順位が高くなります。(同じセレクタの場合は、後から記述した方が優先度が高い)

なお、CSSではこのような適用する優先順位のことを、 詳細度と呼んでいます。

詳細度の具体的な解説は、今後様々なセレクタを紹介する際に行います。

セレクタの使い分け
昔はレイアウトには IDセレクタ、装飾にはクラスセレクタを使ってデザインされているサイトが多かったですが、IDセレクタの多用は詳細度が高くなり、スタイルの上書きが困難となるなどのことから、最近では詳細度を一定に保つことを考慮して、クラスセレクタを中心にデザインすることが一般的です。

基本的なセレクタを使ってみよう

テキストエディタを開いて、下記の手順に従ってHTMLとCSSを作成してみましょう。

  1. テキストエディタを開く。
  2. 「Chapter02」フォルダ内の「index.html」を開く。
  3. 下記を参考に head 要素内に link 要素を追加し、「CSS」フォルダ内の「style.css」をリンクする。
Chapter02/index.html
<head>
  <meta charset="UTF-8">
  <title>基本的なセレクタの練習</title>
  <link rel="stylesheet" href="css/style.css">
</head>
  1. 上書き保存
  2. 下記を参考に、音楽好きの2人には「 music」という分類名を、ボブには「 bob」という固有名を指定する。
Chapter02/index.html
<h1>基本的なセレクタの練習</h1>
<ul>
  <li class="music" id="bob">ボブは音楽が好きだ。</li>
  <li>ムカミは茶道が好きだ。</li>
  <li class="music"> メアリーは音楽が大好きだ。</li>
</ul>
  1. 上書き保存
  2. 「Chapter02」 › 「css」フォルダ内の「style.css」をテキストエディタで開く。
  3. 下記を参考に CSSを記述
Chapter02/css/style.css
li {
  color: green;
}

.music {
  color: orange;
}

#bob {
  color: brown;
}
  1. 上書き保存
  2. 「Chapter02」 フォルダ内の「index.html」をブラウザで開く。
  3. 各セレクタに指定した色が適用されているかを確認(ボブの色は詳細度の高いidセレクタの色になっている)
ブラウザでの表示例

RERUN

コメント

CSSのコード内にコメント(メモ)を残すことができます。

コメントは「 /*」 〜「 */」の間に記述します。

コメント
/* ここにコメントを記述 */

コメントを使ってみよう

テキストエディタを開いて、下記の手順に従ってCSSを作成してみましょう。

  1. テキストエディタを開く。
  2. 「Chapter02」 › 「css」フォルダ内の「style.css」をテキストエディタで開く。
  3. 下記を参考に コメントを追加する。
Chapter02/css/style.css
/* タイプセレクタ */
li {
  color: green;
}

/* クラスセレクタ */
.music {
  color: orange;
}

/* IDセレクタ */
#bob {
  color: brown;
}
  1. 上書き保存

練習問題

「Chapter02」 › 「quest」フォルダ内の「index.html」と「css」フォルダ内の「style.css」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。

完成イメージ

RERUN

解答例

まとめ

基本のセレクタは理解できましたか?

  • タイプセレクタは、要素名を指定するセレクタ。
  • クラスセレクタは、class属性の属性値に対してスタイルを指定する
  • idセレクタは、id属性の属性値に対してスタイルを指定する