HTML・CSS class と id属性の意味 違いや使い方を解説

本記事は広告が含まれる場合があります CSS HTML

【HTML CSS】classとid属性の意味や違い・使い方を解説

今回はHTML・CSSを勉強し始めた時に、htmlタグにid名やclass名が出てきますが何のことかよくわからない方も多いのではないでしょうか。

classやid属性は、HTML・CSSを勉強する上で必ず必要になる知識です。

今回はHTML・CSSを使ってコーディングをしていく上で非常に重要なclass、id属性の意味や違い・使い方を解説していきます。

 

 

 

classとid属性の役割とは?

classとid属性の役割は特定のタグのに目印をつけることです。

特定のタグにclass名や・id名を設定することで、指定したタグだけにCSSでスタイルを適用させたり、javascriptで操作することができるようになります。

 

例えば以下のようなHTMLコードがあり、2番目と4番目のpタグのみ文字色を赤色に変更したいとします。

classとidの役割を解説するのに用意した例

この場合、以下のように「タグ名{}」といった書き方だと全てのpタグに対してスタイルが適用されてしまいうまくいきません。

全てのpタグに対してスタイルが適用されてしまっている

そこで特定のタグ(今回の場合は2番目と4番目のpタグ)のみにスタイルを効かせたい場合は、以下のように該当するタグにclass属性を指定し、classセレクターを使ってスタイルを指定してあげる必要があります。

classを使用して2番目と4番目のpタグにのみスタイルを適用させている例

なお、class属性とid属性は書き方や特徴が少し異なります。そこで以下でそれぞれの使い方について詳しく解説していきます。

 

 

class属性の使い方

class属性の基本的な使い方

まずはclass属性の使い方を説明します。

class属性の書き方を解説している図

classを使って特定のタグにだけスタイルを適用させるには、HTML・CSSファイルに以下のような書き方をする必要があります。

■class属性の書き方

  • HTMLの書き方:<p class="任意のclass">という形でclassを付ける
  • CSSの書き方:.(ドット)任意のclass {スタイル}という形でスタイルを指定する

classを使用して2番目と4番目のpタグにのみスタイルを適用させている例

なお、基本的にclassは自由に付けることができますが中には使用してはいけないものもあります。これについては「id・class名の値の命名ルール」で詳しく解説していきます。

 

 

class属性の特性・使用ルール

次にclass属性の特徴について紹介します。

■class属性の特徴

  1. ページ内で同じclassを使用できる
  2. 同じタグに異なるclassを指定できる

 

1. ページ内で同じclassを使用できる

まず1つ目の特徴は、1ページ内で同じclassを使用できるという点です。

classは回数制限等がなく何度でも使用することができるため、使い回したいコンポーネントなどがある場合などに便利です。

ページ内で同じclassを複数回使用できる

 

2. 同じタグに異なるclassを指定できる

2つ目の特徴は、同じタグに異なるclassを指定できるという点です。

同じタグに異なるclassを指定するには、classの間に半角スペースを取ります

同じタグに異なるclassを指定する方法

同じタグに異なるclassを指定している例

 

 

id属性の使い方

id属性の基本的な使い方

class属性の使い方が分かったら、次はid属性の使い方を解説します。

id属性の書き方を解説している図

idを使って特定のタグにだけスタイルを適用させるには、HTML・CSSファイルに以下のような書き方をする必要があります。

■id属性の書き方

  • HTMLの書き方:<p id="任意のid">という形でidを付ける
  • CSSの書き方:#(シャープ)任意のid {スタイル}という形でスタイルを指定する

id属性の使用例

なお、id属性はclass属性とは異なる特徴があるので、以下でid属性の特徴について詳しく解説していきます。

 

 

id属性の特性・使用ルール

それではid属性の特徴についてです。id属性には以下の3つの特徴があります。

■id属性の特徴

  1. ページ内で同じidは1回のみ使用できる
  2. 同じタグに異なるidは指定できない
  3. ページ内リンクを作成することができる

 

1. ページ内で同じidは1回のみ使用できる

1つ目の特徴は、同じidはページ内で1回のみしか使用できないという点です。

id名は重複が許されません。ページ内で同じidは1回のみ使用できます。
 
■間違ったidの使い方(同じ名前が重複)

 

■正しいidの使い方(名前が重複していない)

ページ内で同じidは1回のみ使用できる

なお、ページが変われば同じidでも1回ずつ使用することが可能です。

 

2. 同じタグに異なるidは指定できない

2つ目の特徴は、同じタグに異なるidは指定できないという点です。

idはclassとは異なり、半角スペース区切りで複数のidを指定することはできません。

同じタグに異なるidは指定できない

 

3. ページ内リンクを作成することができる

3つ目は、ページ内リンクを作成することができるという点です。

ページ内リンクとは同じファイル内のある特定の箇所まで飛ばすことができるリンクのことを言いますが、これもidを指定することで実装しています。

ページ内リンクの仕組み

■ページ内リンクの作り方

  • (STEP. 1) 飛び先となる要素にid属性を付与する
  • (STEP. 2) aタグのhref属性の値を「#id名」にする

小文字と大文字は区別される

 

id・classの使用ルール・注意点

id・class属性に入れる名前(値)の制限

以下では、任意のclass・idを付ける際の注意点をいくつか紹介していきます。

■id・class属性に入れる名前(値)の制限

  1. 先頭文字に数値は使用できない
  2. ハイフン(-)、アンダーバー(_)以外の記号は使用できない
  3. 小文字と大文字は区別される

 

1. 先頭文字に数値は使用できない

まず1つ目は、classやidの先頭文字に数値は使用できないという点です。

そのため、「1box」「2box」といった名前は使用できません。

 

2. ハイフン(-)、アンダーバー(_)以外の記号は使用できない

2つ目は、ハイフン(-)、アンダーバー(_)以外の記号は使用できないという点です。

そのため、「&sample」「%sample」といった名前を使用するとスタイルがうまく適用されません。

 

3. 小文字と大文字は区別される

3つ目は、小文字と大文字は区別されるという点です。

classやidで使用されている小文字と大文字は区別されるので、例えば「sample」と「Sample」という名前は異なるものとして認識されます。

小文字と大文字は区別される

 

同一タグ内でclass・idの両方を使用することが可能

同一タグ内でclass・idの両方を使用することができます。

ここまで紹介した全サンプルでは、classかidのどちらか一方だけを使用していましたが、以下のように同一タグ内で両方を指定することも可能です。

ページ内で同じidは1回のみ使用できる

 

CSSで指定する際はidの方がclassの指定よりも優先される

CSSの各セレクターには「詳細度」と呼ばれる優先順位があり、例えばidセレクターとclassセレクターを比べると、idセレクターの方が優先されるといったルールが決められています。

そのため、例えば以下のようにメディアクエリを使用して横幅1000px以下になった場合に1度指定した値を上書きしたい場合は、はじめの指定にidセレクター、上書き用の指定にclassセレクターを使用しているとうまくいかないので注意が必要です。

idの方がclassの指定よりも優先される

なお、セレクタの詳細度については以下の記事にて詳しく解説していますので、興味がある方はこちらもあわせてご覧頂くと良いでしょう。

 

 

まとめ・classとidを使うと効率的にコーディングができる!

まとめです。今回はclassとid属性の使い方やそれぞれの特徴、違いについてを詳しく解説しました。

class id
使い方
  • HTMLの書き方:<p class="任意のclass">という形でclassを付ける
  • CSSの書き方:.(ドット)任意のclass {スタイル}という形でスタイルを指定する
  • HTMLの書き方:<p id="任意のid">という形でidを付ける
  • CSSの書き方:#(シャープ)任意のid {スタイル}という形でスタイルを指定する
特徴
  1. ページ内で同じclassを使用できる
  2. 同じタグに異なるclassを指定できる
  1. ページ内で同じidは1回のみ使用できる
  2. 同じタグに異なるidは指定できない
  3. ページ内リンクを作成することができる

classやidを特定のhtmlタグに設定することでCSSでレイアウト装飾がしやすくなります。

classやid属性は、HTML・CSSを勉強する上で必ず必要になる知識ですのでぜひ使いこなせるようになりましょう。

なお、これからサーバーやドメインを契約してホームページを作りたいという方は「【総まとめ】個人ホームページの作り方・Webサイト自作方法」をご参考ください。

今回は以上になります。最後までご覧頂き、ありがとうございました。
 

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

おすすめ記事3選

【徹底解説】レンタルサーバーおすすめ比較7選WordPress対応

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

WordPress(ワードプレス)でブログ・ホームページを始めようと思った時に、レンタルサーバー選びでどれが良いのか迷うことも多いのではないでしょうかこれからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-CSS, HTML