基本のセレクタと色

要素・クラス・idのセレクタで要素を正確に狙えるようになり、そこに色を適用しましょう。

9 分 · 3 問

セレクタ は、どの要素にスタイルを付けるかを示すCSSルールの一部です。もっとも単純なものは要素セレクタで、山かっこを付けずにタグ名を書きます。p はすべての段落を、h1 はすべての最上位見出しを狙います。これはうまく機能しますが、ときに範囲が広すぎることがあります。10個ある段落のうち1つだけに色を付けたい場合はどうでしょう？そこで登場するのがクラスとidです。

クラス は、class 属性で1つ以上のHTML要素に付けるラベルです。CSS側では、ドットで狙います。.important は class="important" を持つすべての要素を選びます。id は一意なラベルで、ページに1回しか現れてはならず、たとえばヘッダーに付けます。CSS側では、シャープで狙います。#header です。

<h1 id="main-title">My cooking blog</h1>
<p class="highlight">Recipe of the day: the pie.</p>
<p>A perfectly ordinary paragraph.</p>
<p class="highlight">Tip: preheat the oven.</p>

#main-title {
  color: darkgreen;
}

.highlight {
  background-color: yellow;
}

p {
  color: black;
}

この例では、見出しが濃い緑になり、highlight というラベルの付いた2つの段落が黄色い背景になり（background-color は背景色を設定します）、すべての段落の文字が黒になります。違いを覚えておきましょう。クラスは好きなだけ多くの要素に再利用できるのに対し、idはページ内で一意です。迷ったら、クラスを使いましょう。

では色について話しましょう。CSSはいくつかの表記を受け付けます。色の名前（red、blue、orange など）は単純ですが数に限りがあります。16進数表記は # に続けて6文字で、赤・緑・青の量を調整します。#ff0000 は純粋な赤です。最後に、rgb() 表記は同じ量を0から255までの数字で表します。rgb(255, 0, 0) も純粋な赤です。

.highlight {
  color: tomato;
  background-color: #fff3cd;
}

#main-title {
  color: rgb(0, 100, 0);
}

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. class="menu" を持つすべての要素を狙うCSSセレクタはどれですか？
   • #menu
   • .menu
   • menu
   • class.menu
2. クラスとidの主な違いは何ですか？
   • idは複数の要素に付けられるが、クラスは付けられない
   • クラスは再利用でき、idはページ内で一意でなければならない
   • クラスは段落にしか効かない
3. これらの値のうち、純粋な赤を表すのはどれですか？
   • rgb(0, 0, 255)
   • #00ff00
   • #ff0000
   • rgb(0, 255, 0)