CSS ・ CSSの記法
要素セレクタ
タグ名で直接指定する
p や h2 などの要素名（タグ名）をそのまま書いて、その要素すべてにスタイルを指定するセレクタです。タイプセレクタとも呼ばれます。
01
サンプルコード
HTML
1<section class="news">
2 <h2>お知らせ</h2>
3</section>
4<aside>
5 <h2>人気の記事</h2>
6</aside>
CSS
1/* △ すべての h2 に効いてしまう */
2h2 {
3 color: #fff;
4 background: #7d5411;
5 padding: 4px 12px;
6}
02
実行結果
ブラウザでの表示装飾したかったのは「お知らせ」だけですが、すべての h2 に効いています
03
解説
要素セレクタは、p・h2・a のように要素名をそのまま書きます。そのページにあるその要素すべてにスタイルが適用されます。
上の例では「お知らせ」の見出しだけを装飾したかったのに、別のセクションにある「人気の記事」の h2 まで同じ見た目になっています。共通のCSSファイルなら、別のページの h2 にも影響します。
このように影響範囲が広すぎるため、要素名への直接指定はできるだけ避けます。ページ全体の基本スタイル（body の文字色、img の max-width など）や、リセットCSSに限って使うのが一般的です。
04
応用例・注意点
使ってよい場面・避けたい場面
| 場面 | 説明 |
|---|---|
○ body / html | ページ全体の文字色・書体・背景 |
○ img | max-width: 100% などの共通設定 |
○ リセットCSS | ブラウザごとの差をなくす初期設定 |
△ h2 / p / li など | 特定の場所だけ装飾したいときはクラスを使う |
△ div / span | 役割がないため、クラスで指定する |
クラスで範囲を限定する
装飾したい要素だけにクラスを付けると、ほかの h2 に影響しません。
HTML
1<section class="news">
2 <h2 class="news-title">お知らせ</h2>
3</section>
CSS
1.news-title {
2 color: #fff;
3 background: #7d5411;
4}
親のクラスで範囲を絞る
クラスを付けられない場合は、親のクラスと組み合わせて範囲を限定します。
CSS
1.news h2 {
2 color: #7d5411;
3}
注意点
- 01要素セレクタで細かくデザインすると、後から追加した部分にも意図しないスタイルが当たってしまいます。
- 02要素セレクタは詳細度が低い（≒1点）ため、クラスの指定で簡単に上書きされます。