CSSの指定の仕方(タグ・id・class・style)

CSSで「どの要素の見た目を変えるか」を決める方法は、主に4種類あります。

#指定の仕方HTML側CSSの書き方対象
1タグ名
<h1>
h1 {
  color: red;
}
そのタグすべて
2id
<h1 id="title">
#title {
  color: red;
}
1つだけ
3class
<h1 class="note">
.note {
  color: red;
}
付けたものすべて
4style 属性
<h1 style="color: red;">
(CSSファイルや <style> には書かない)そのタグ1つだけ

どれも「赤い文字にする」という結果は同じです。違いはどこに適用されるかです。

1. タグ名で指定する

CSSにタグ名を書くと、ページ内のそのタグすべてに適用されます。

<style>
  h1 {
    color: red;
  }
</style>

<h1>見出し1</h1>
<h1>見出し2</h1>
<p>本文</p>

2つの h1 が両方赤くなります。p は変わりません。

2. id で指定する

HTMLのタグに id で名前を付け、CSSでは #名前 で指定します。同じ名前はページ内で1つだけ使えます。

<style>
  #title {
    color: red;
  }
</style>

<h1 id="title">見出し1</h1>
<h1>見出し2</h1>

「見出し1」だけが赤くなります。

3. class で指定する

HTMLのタグに class で名前を付け、CSSでは .名前 で指定します。同じ名前を何個でも使えます。タグの種類が違っても使えます。

<style>
  .note {
    color: red;
  }
</style>

<h2 class="note">こんにちは!</h2>
<p class="note">今日はいい天気ですね</p>
<p>これは変わりません</p>

class を付けた2つが赤くなります。

4. style 属性で直接指定する

HTMLのタグに style="..." と書くと、そのタグ1つだけに適用されます。CSSの書き方(プロパティ: 値;)は同じです。

<h1 style="color: red;">見出し1</h1>
<h1>見出し2</h1>

手軽ですが、数が増えるとHTMLが読みにくくなります。まずは試すときに使い、複数に使うなら上の1〜3を使います。

idとclassの違い

HTMLでの付け方CSSでの指定使える数
id
<h1 id="title">Hello</h1>
#title {
  color: white;
}
ページ内で1つだけ
class
<p class="note">こんにちは</p>
.note {
  color: red;
}
ページ内で何個でも

CSSの指定は、id は #、class は . を名前の前に付けます。

やってはいけないこと

コード
NG
<p id="note">こんにちは</p>
<p id="note">今日はいい天気ですね</p>

同じ id を複数の場所に付けてはいけません。
OK
<p class="note">こんにちは</p>
<p class="note">今日はいい天気ですね</p>

複数に付けたいときは class を使います。

使い分けの目安

同じ要素に複数の指定があるとき

同じ要素に別の色が指定されているときは、一般に style 属性 → id → class → タグ名 の順で強く、強いほうが優先されます。

<style>
  h1 { color: black; }
  .note { color: blue; }
  #title { color: red; }
</style>

<h1 id="title" class="note">見出し</h1>

タグ名・class・id がすべて当たりますが、いちばん強い id の赤色になります。

引用符 " は半角で書きます。全角の ” だとエラーになります。