Que.howCategoryプライバシーポリシー

class属性とid属性【HTML・CSS入門】

HTML、CSS入門者向けに、class属性とid属性について簡単に解説していきます。

Contens

属性とは何か

HTML
1
2
3
<p class="first">なにかの文章</p>
<p>なにかの文章</p>
<p>なにかの文章</p>

属性はタグ(開始タグ)の中に、以下の形式で記述します。

属性の名前="属性の値"

値を " で囲い、名前と = で繋ぎます。

上のコードでは、1つ目のpタグの中に class属性が書かれています。名前は『class』で、値は『first』です。

値が複数ある時

HTML
1
2
3
<p class="first red large">なにかの文章</p>
<p>なにかの文章</p>
<p>なにかの文章</p>

値が複数ある場合は、上のコードのように半角スペースで区切ります。

class属性とid属性

HTML
1
2
3
<p class="first" id="ppp">なにかの文章</p>
<p>なにかの文章</p>
<p class="last">なにかの文章</p>

class属性とid属性はどちらもタグの中に書き、同じタグに複数の属性を書くことも可能です。その場合は、上のコードのように半角スペースで区切ります。

違い

HTML
1
2
3
4
5
<p class="red" id="aaa">なにかの文章</p>
<p class="red large" id="bbb">なにかの文章</p>
<p class="blue large" id="ccc">なにかの文章</p>

<p id="ccc">この書き方は出来ない</p>

class属性とid属性の違いは、class属性は1つのHTML内の複数のタグに、同じ値を設定出来るのに対し、id属性は複数のタグに同じ値を設定することが出来ません。

上のコードの場合、class属性の『red』と『large』という値が複数のタグに設定されていますが、これは問題ありません。ただし、3行目で既に『ccc』というid属性があるので、5行目のように再度『ccc』という値のid属性を書くことは出来ません。

使い分け

class属性はこう使う、id属性はこう使うべきみたいなものは無いと思いますし、私自身も特に意識せずに使用してきたのですが、個人的には、CSSのセレクタとして使用する際はclass属性が多い気がしていて、JavaScriptから扱うものにはid属性を使うことが多いように思います。

class属性はタグのグループ分けのようなものであり、ここと、あの要素のデザインだけ変更したい場合などに重宝します。もちろん、特定の要素だけ変更したい場合にも使用できます。

CSSのセレクタの書き方

class属性とid属性はそれぞれ、CSSのセレクタで指定する時などに役立つものです。

以下のHTMLをbody要素内に書き、CSSをstyle要素内か別ファイルに書いてみてください。

HTML
1
2
3
4
5
6
7
8
9
<h1>文章のタイトルH1</h1>
<p class="aka">なにかの文章</p>
<p>なにかの文章</p>
<p class="aka large">なにかの文章</p>

<h2 id="ao">文章のタイトルH2</h2>
<p class="aka">なにかの文章</p>
<p>なにかの文章</p>
<p class="aka large">なにかの文章</p>
CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.aka {
    color: red;
}

.large {
    font-size: 1.5rem;
}

#ao {
    color: blue;
}

上の2つのコードをファイルに書き込み、ブラウザで表示すると以下のようになります。

class属性で『aka』を指定されたタグは文字色が赤色になり、『large』を指定されたタグはフォントサイズが大きくなっています。そして、id属性で『ao』が指定されたものは青色になっています。

# と .

CSSのセレクタを書くとき、タグ名の場合はそのまま書いていましたが、class属性の場合は、値の前に . を書き、id属性の場合は、 # を書きます。

上のコードの場合、HTMLで『red』というclass属性の値は、CSSのセレクタとして書く時は『.red』となり、『ao』というid属性の値は、『#ao』という風に書いています。

さいごに

class属性とid属性をうまく使い、すっきりとページをデザインしたり、JavaScriptで動作を定めていきましょう。


Category
  1.  > プログラミング
  2.  > ウェブサイト
  3.  > HTML
  4.  > 入門