クラスとID

タグ名だけでは足りない

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

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

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

id はページに 1 つだけ

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

名前の付け方

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

1. index.html の各部分に class を振る。肩書きに tagline、セクション見出しに section-title、趣味の項目に hobby-item など
2. .tagline と .section-title と .hobby-item のルールを書いて色をあてる
3. th と button のルールを .skill-table th と .submit-button に書きかえる
4. .site-footer にグレーの文字色をあてる