ホームページ作成/HTML・スタイルシート(CSS)の基礎

idとclassの違いと使い分け!スタイルシート(CSS)適用法

idとclassの違いと、使い分け方法をご紹介いたします。HTMLにスタイルシート(CSS)を適用する方法には、class属性を使う方法と、id属性を使う方法があります。この「class」と「id」は明確に役割が異なります。全部にclass属性を使っている場合は問題ありませんが、全部にid属性を使っている場合は問題がある可能性があります。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

「id」と「class」の違いと使い分け

classとid、どちらを使う?

class属性とid属性、どちらを使う?

スタイルシート(CSS)を記述する際、「特定の要素すべて」を一括して装飾するのではなく、「特定の要素のうち一部だけ」を装飾したい場合、HTMLに付加できる属性は2種類ありますね。class属性と、id属性です。この「class」と「id」を、正しく使い分けられていますか?

この「class」と「id」は、どちらでもよい方法が2種類用意されているわけではなく、明確に役割が異なります。そこで今回は、「class」と「id」の違いと、その使い分け方法をご紹介いたします。
 

class属性を使ったスタイルの適用例

スタイルを適用する方法として「class」を使う場合は、次のようなソースになります。

■HTML:
<p class="sakura">クラスを使った例</p>
■スタイルシート:
p.sakura { color: red; }
対象の要素名とclass名との間に半角の「.」(ドット)記号を記述します。要素名は省略することもできます。上記では「p」が要素名で「sakura」がclass名です。
 

id属性を使ったスタイルの適用例

スタイルを適用する方法として「id」を使う場合は、次のようなソースになります。

■HTML:
<p id="tomoyo">アイディーを使った例</p>
■スタイルシート:
p#tomoyo { color: red; }
対象の要素名とid名との間に半角の「#」(シャープ)記号を記述します。この場合も、要素名は省略できます。上記では「p」が要素名で「tomoyo」がid名です。

※備考:ここで使うのは[Shift]+[3]キーなどで入力可能な「#」です。「シャープ」とも読まれますが、音楽記号のシャープ「&#9839;」とは形が異なります。「#」は「ハッシュ」と読まれることもありますが、Unicodeで定義されている名称は「NUMBER SIGN(番号記号)」です。
 

class属性とid属性の違いと、使い分け方法

上記のサンプルソースは、スタイルシートの適用に「class」を使うか「id」を使うかの差だけで、ブラウザ上での表示効果は全く同じです。どちらも、対象の文字が赤色になります。

では、「class」と「id」の違いは何でしょうか?
実は、両者の役割には大きな差があります。また、スタイルが適用される優先順位にも差が付けられています。

次のページから、「class」と「id」の違いと、それらの使い分け方法についてを詳しくご紹介いたします。
  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます