CSSの「id」と「class」とは－新米web担のためのホームページの作り方 | 第10回

2018年3月5日2026年4月1日

ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。先回は、ホームページのスタイリングに欠かせないCSSについてご紹介しました。HTMLとCSSで頻繁に用いる「id」と「class」についてご説明します。

先回のCSSの記事でも少しご説明しましたが、スタイルを適用する対象を指定するセレクタには以下の2種類があります。

１．「body」「h1」「ｐ」などHTMLにデフォルトで設定されているもの

２．自分で自由に名前を付けることのできるもの（「id」と「class」）

例えば、見出しを意味する「h1」のスタイルを指定したい場合には、CSSでそのまま「h1」と記入しスタイルを指定することができます。そうすることでページ内で「h1」が登場するたびに、指定した同じスタイルが適用されます。

しかし、デフォルトで設定されているもの以外にも、ページのこの部分だけ別の形にしたいというものが出てきます。そのような場合に「id」と「class」を用いて自由に名前を付けスタイルを指定することができます。

そして、この「id」と「class」はホームページを作成するうえで今後頻繁に用いることになりますので、抑えておきましょう。

「id」と「class」の違い

これは、もっとも簡単に言うと、

ページ中で一度だけ使用するスタイルは「id」、何度も繰り返し使用する場合には「class」を使う

と覚えましょう。

「id」はその名の通り、個々を識別するために用いられます。同じ「id名」が2か所以上で使用されることはありません。

一方「class」は同じスタイリングをページの他の部分でも用いたいという場合に便利です。そうしておけば一か所のCSSを調整することでHTMLの複数のスタイルを調整することができるからです。

「id」の記入方法

HTML側には以下のように記入します。　※以下は一例です。「id=””」のダブルクォーテーションで囲まれた部分に自由に名前を付けることができます。後で、どこで使用されているのか分かるような名前を付けましょう。

<div id="title_01">
　IDはページ上で一度しか使用しない部分で用います。
</div>

これに対応するCSS側では以下のように記入します。「id」の場合には「id名」の前に「＃」を記入する決まりになっています。

#title_01{
　　font-weight: bold;
　　text-align: center;
　　color: green;
}

「class」の記入方法

HTMLには以下のように「Class=””」と記入し、このダブルクォーテーション内に自由に名前をつけることができます。　もちろん「id」の場合と同じようにわかりやすい名前を付けておきましょう。

<div class="title">
　CLASSはページ上で同じスタイリングを用いたいときに何度でも使用できます。
</div>

これに対応するCSSには以下のようにスタイルを指定します。　「class」を用いる場合には「class名」の前に「.」を付ける決まりになっています。

.title{
　　font-weight: bold;
　　text-align: center;
　　color: blue;
}

これらを記入すると以下のようになります。

ブラウザで確認してみましょう。　同じ「titel」という名前のクラスがHTMLの中で2回使用されていますが、これらは同じセレクタ名が使用されており、当然同じスタイルがCSSで指定されているので、ブラウザで確認したときには同じように表示されます。　ブラウザで表示すると以下のようになります。

上記のようにブラウザで表示がなされていれば問題なく記入できています。

「id」と「class」を使い分ける理由

しかし、かりにページ内で同じ「id名」を複数回使用したとしても、ブラウザの表示上では大きな問題は生じません。

ではなぜ「id」と「class」を使い分ける必要があるのでしょうか。

一つ目の理由として、ホームページを更新していくときに使い分けて最初に作っておかないと後で苦労するからです。

ホームページは一度作成したら終わりではなく、常に更新していく種類のものです。作り始めた時にはわかっていても、ウェブサイトの規模が大きくなるにしたがって、特定のスタイルをどこで使用しているのかがわかりづらくなるものです。

その際、「id名」と「class名」がわかりやすいもので、かつ、この2つがしっかり使い分けてHTMLとCSSが作成されていると、そのスタイルが使用されている場所をすぐに特定することができるのです。

最初にしっかり作っておかないと後で苦労することになりますので、「id」と「class」はしっかり使い分けるようにしましょう。

・・・しかし！！　特定のスタイルをホームページ内で今後も複数回使用するか、もしくはその場所だけか、つまり「class」を用いたらいいか「id」を用いたらいいか、ページを作っていく最初の段階ではわからないではないか！と思われるかもしれません。

そうなのです。基本的に「class」を使用していけばいいのです。　なぜなら、作成を始めるときに、その同じスタイルをその場所だけで使うのか、今後も複数回使用していくことになるかわからないだけでなく、実のところウェブページ上で「その場所だけ」特別なスタイルを適用することはそれほど多くないからです。　例えば「見出し」と言えば、どのページでも基本的に同じスタイルを適用することになるでしょう。

これを聞いて、「これまでの話は何だったのか？」と思われたかもしれませんが、誤解なさらないでください。多くの場合「class」を使用することになることには変わりないのですが、「id」を使わなければならない場面があるのです。

どこで「id」を使用するのか

「id」を使用するところは「その場所だけ」に指定する部分です。　簡単に言うと、

１．ウェブページ内リンクを作る部分

２．（画像を指定する部分）

ウェブページ内リンクを作る部分

HTMLにはページ内リンクを設定することができます。一般的にフッターメニューからのリンク先や「ページトップに戻る」などのリンク先部分に多く用いられています。そこをクリックすると、特定のページの特定の場所に飛ぶというような構造で、皆さんも一般的なウェブサイトでよくご覧になっていると思います。

そのリンク先に設定する際には必ず「id」を使用しなければなりません。

なぜなら、そのリンク先に仮に「class」が用いられているなら、その「class名」はページ内で何度も使用されているわけですので、リンクで飛ぶときに、「ページ内のどこに飛べばいいのか」わからなくなり、動作に問題が生じることになります。　リンク先を明確にするためにはリンク先には「id」を用い、場所を明確にしましょう。

※今後の記事でページ内リンクの設定方法をご説明します。