CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのIDとクラスの違いとは?正しい使い分けを徹底解説

CSSにおいて「ID」と「クラス」は、どちらも要素にスタイルを適用するためのセレクタですが、その役割には明確な違いがあります。最大の違いは、クラスは複数の要素に同じスタイルを適用できるのに対し、IDはページ内で1つの要素にのみ適用されるという点です。さらにIDには、URLを使ってページ内の特定の要素へ直接ジャンプできる機能や、JavaScriptから要素を操作する際に活用されるといった特別な役割もあります。

CSSセレクタとは?

Webページを作成するとき、「すべての<p>タグの文字色を緑にしたい」「見出しのフォントサイズを変更したい」など、特定の要素に対してスタイルを適用したい場面は多くあります。

そんなときに活躍するのが「セレクタ」です。セレクタを使えば、スタイルを適用したい要素をピンポイントで指定できます。CSSにはユニバーサルセレクタ、子孫セレクタ、子セレクタ、グループセレクタなど、さまざまな種類のセレクタが用意されています。

中でも特によく使われるのが、HTML要素に付与されたclass属性やid属性をもとにスタイルを適用する「クラスセレクタ」と「IDセレクタ」です。この2つは初心者の開発者から混同されやすいので、それぞれの仕組みを詳しく見ていきましょう。

IDセレクタは「一意」である

IDセレクタは、Webページ上の単一の要素にだけスタイルルールを定義するためのものです。1つのHTML文書内で、同じID属性値を持つ要素は1つしか存在できません。そのため、IDセレクタで複数の要素に同じスタイルを適用することはできません。

IDセレクタはハッシュ記号(#)で定義し、直後にスタイルを適用したいID名を続けて記述します。以下はIDセレクタの使用例です。

<html>
<p id="betaBanner">これはバナーです。</p>
<style>
#betaBanner {
  color: white;
  background-color: orange;
}
</style>

この例では、HTML文書内のIDが「betaBanner」である<p>要素に対してスタイルが適用されます。背景色がオレンジ色になり、テキストの色が白に設定されます。

クラスセレクタは「一意ではない」

一方、クラスセレクタは、指定した値と同じclass属性を持つすべての要素にスタイルルールを適用できます。

前述のとおり、IDは1つのページで1回しか使えないため、IDセレクタでスタイルを適用できるのは1つの要素だけです。しかしクラスは複数の要素で共有できるため、クラスセレクタでスタイルを定義すれば、そのクラスを持つすべての要素に同じスタイルが反映されます。

クラスセレクタはドット(.)で定義し、続けてスタイルを適用したいクラス名を記述します。以下はクラスセレクタの使用例です。

<html>
<p class="orangeBackground">これはバナーです。</p>
<div class="orangeBackground">これもバナーです。</div>
<style>
.orangeBackground {
  background-color: orange;
}
</style>

このコードでは、<p>タグと<div>タグの両方の背景色がオレンジ色になります。これは、2つのタグが同じクラス名「orangeBackground」を共有しているためです。

さらに、1つの要素に複数のクラスを指定することも可能です。たとえば、先ほどの<div>タグに「large」というクラスを追加したい場合は、次のように記述します。

<html>
<div class="orangeBackground large">これはバナーです。</div>

この場合、「orangeBackground」と「large」の両方のクラスに定義されたスタイルルールが、この要素に適用されます。IDの場合は1つの要素に1つのIDしか持てないため、このような動作は実現できません。

IDにはブラウザ上での特別な役割がある

ここまで、IDは1つの要素にしかスタイルを適用できない一方、クラスは複数の要素に適用できるという違いを見てきました。しかし、クラスとIDの違いはそれだけではありません。

ブラウザ上で、クラスには特別な機能はありません。主な目的は、ページ内の複数の要素にスタイルを適用することです。一方、IDはブラウザがページ内の特定の場所へ移動するために利用できます。

要素にIDを割り当てると、特別なURLを使ってその要素へ直接リンクすることができます。これは、IDがページ内で一意であるために実現できる動作です。

たとえば、Webサイトへのリンクをクリックしたときに、自動的に特定の見出しへスクロールさせたいとしましょう。その場合は、次のようにIDを指定します。

<h3 id="section3">セクション3</h3>

このコードでは、「セクション3」というテキストを含む<h3>タグにIDを割り当てています。これにより、次のようなURLでユーザーをその要素へ直接誘導できます。

https://domain.com/index.html#section3

ユーザーがこのURLにアクセスすると(domain.comはあなたのサイトのドメイン)、IDが「section3」の見出しへ自動的にスクロールします。このような動作はクラスでは実現できません。

IDはJavaScriptでも使われる

JavaScriptの経験があれば、IDが頻繁に使われていることにお気づきでしょう。getElementById関数を使うと、ページ上の特定の要素を選択できます。この関数が成り立つのは、「同じIDを持つ要素は1つしか存在しない」という前提があるからです。

一方、クラスは複数の要素に対応するため、JavaScriptで特定の1つの要素を操作したい場合には向いていません。

IDとクラスは併用できる

HTMLのルール上、1つの要素にIDとクラスの両方を割り当てることは問題ありません。

たとえば、「backgroundOrange」というクラスのスタイルを<div>タグに適用しつつ、その<div>固有のスタイルも追加したい場合は、次のように記述します。

<div class="backgroundOrange" id="customDiv"></div>

この<div>タグには、クラス「backgroundOrange」のスタイルが適用されるとともに、IDセレクタで定義された「customDiv」のスタイルも適用されます。

まとめ

CSSを使ううえで、IDとクラスのどちらを使わなければならないという厳密なルールはありません。しかしベストプラクティスとしては、1つの要素だけにスタイルを適用したい場合はIDを、複数の要素にスタイルを適用したい場合はクラスを使うのがおすすめです。

この記事では、CSSのIDセレクタとクラスセレクタの基本を実例とともに解説し、両者の違いを比較しました。これであなたも、プロの開発者のようにIDセレクタとクラスセレクタを使いこなせるはずです!

  1. CSSで画像を中央に配置する方法をわかりやすく解説

    Webページを作成していると、「画像を画面の中央に表示したい」という場面によく出会います。CSSを使えば、画像の中央寄せはとても簡単に実現できます。この記事では、最も基本的な方法である margin プロパティを使ったセンタリングの方法を、実際のコード例とともに解説します。基本の方法：display: block と margin: auto を使うimg要素はデフォルトではインライン要素として扱われるため、そのままでは margin の自動計算が機能しません。そこで、display: block; を指定してブロックレベル要素に変更し、左右のマージンに auto を設定することで、画像が水平

  2. CSSのlist-style-imageプロパティで画像をリストマーカーとして使う方法

    CSSでは、list-style-imageプロパティを使用することで、リストの先頭に表示されるマーカー(黒丸や番号など)を、お好みの画像に置き換えることができます。サイトのデザインに合わせてオリジナルのアイコンを使いたい場合に便利なプロパティです。 基本構文 list-style-image: url(画像のURL); url()の中に、マーカーとして表示したい画像ファイルへのパスを指定します。ul要素(順序なしリスト)でもol要素(順序付きリスト)でも同様に適用できます。 使用例 以下の例では、ul要素とol要素の両方に対して、同じ画像をリストマーカーとして設定しています。 <!DO