クラスとID

タグ名だけでは足りない

ページの中に p は 10 個以上あります。そのうちヘッダーの肩書きだけを小さなグレーにしたい。でも p と書くと全部の段落が変わってしまいます。要素セレクタの限界がここです。

解決策は、HTML の側で要素に名前を付けることです。それが class 属性です。

<p class="notice">本日の受付は終了しました</p>

CSS からはドットを頭に付けて呼び出します。.notice と書けば、この class が付いた要素だけが対象になります。class は同じ名前をいくつの要素に付けてもよく、6 つのセクション見出しに section-title と付ければ、その 6 つをまとめて装飾できます。

.notice {
  color: #9a3412;
}

id はページに 1 つだけ

よく似たものに id 属性があります。書き方はほぼ同じで、CSS からは # を頭に付けて呼びます。ちがいは数で、id は同じ名前をページに 1 つしか付けられません。about や contact のように、リンクの飛び先として使うのが本来の役目です。ふだんの装飾は class を使い、id はここぞという 1 か所にとっておきます。

名前の付け方

名前は見た目ではなく役わりから決めます。blue-text ではなく highlight、big-title ではなく section-title です。あとで色を変えても名前がうそにならず、読んだ人にも意図が伝わります。

1. HTML の肩書きの p に tagline クラスを付ける。ほかの要素の class 属性は準備済み
2. CSS に .tagline のルールを書き、文字色を #6b7280 にする
3. button のセレクタを .submit-button に書きかえる。中の宣言と th のルールはそのまま使う