HTMLにCSSを反映させる際のclass属性とid属性の使い分け方の違いとは？

あらすじ

CSS をHTMLに反映する際に

の3つの方法がありました。
 

詳しくはこちらの記事をご覧くださいfa-arrow-circle-down

[初心者用]CSS(スタイルシート)の基本的な書き方をwebデザイナーが解説

2019.8.3

Webサイトを作成する際、HTMLだけでは色のない単調なサイトが出来上がってしまいます。 そこでCascade Style Sheet (カスケイド・スタイル・シート)、通称CSS、を一緒に使ってあげるだけで華やかなサイトに仕上げることができます。 ではこのCSSをどのようにしてHTMLのファイ...

その中のインファイルと外部ファイルから反映する2つの方法では、CSSを対象物に反映するために「id」や「class(クラス)」といった属性を使用します。

今回はこの2つの属性の違いについて説明していきます。

class属性とは

概要

class属性とは、HTMLにCSSを反映させたいときに目印となる属性のことを指します。

クラス名は自由につけることができ、どのHTMLタグにも反映することができます。しかし、クラス名は半角英数、ハイフン(-)、アンダーズコア( _ )のいずれかのみが使用でき、大文字と小文字は区別されるため、どんな文字でも利用できるわけではないのでご注意を。

また、クラス名をCSSで指定する際は必ず「.」をクラス名の前に記載する必要があります。

複数のタグに同時に使用

同じクラス名を複数のタグにつけることで、同じCSSをそのタグにつけることができます。

例えば、

<p class="ex1">Hello World</p>
<p class=”ex1”>Hello World</p>
<p class="ex1">Hello World</p>

.ex1 {
  color:blue;
 }

といった感じで、クラス名がex1のタグにはすべてCSSが反映されています。

一つのタグに複数のClassを指定

一つのタグ内に複数のクラスを指定することもできます。

これにより、一つのタグに複数のCSSを反映させることが可能になります。

複数のclassを指定する際は、クラス名の間にスペースを入れなければなりません。

<p class="ex1"> Hello World </p>
<p class="ex1 ex2"> Hello World </p>
<p class="ex1 ex2 ex3"> Hello World </p>
<p class="ex1 ex2 ex3 ex4"> Hello World </p>

.ex1 {
  border-bottom: 1px solid black;
}
.ex2 {
  border-top: 1px solid black;
}
.ex3 {
  border-left: 1px solid black;
}
.ex4 {
  border-right: 1px solid black;
}

ブロック要素に反映

またブロック要素の親となる部分にクラス名を指定した場合、そのブロック全体にCSSが反映されることになります。

具体的には

<div class="ex1">
  <p> Every day People straighten up the hair, why not the heart？/チェ・ゲバラ</p>
  <p> Once I made a decision, I never thought about it again./マイケル・ジョーダン</p>
</div>

.ex1 {
  color: gray;
}

と、divタグにクラス名を付け、そのクラス名にCSSを反映すると、そのdivタグ内の要素全てに反映されることになります。

インライン要素に反映

ブロック要素とは反対に、インライン要素にCSSを反映した場合はその範囲にだけ反映されます。

どういうことかというと

<div>
  <p>You cannot teach <span class="ex2">a man</span> anything, you can only help him find it within himself./ 
   ガリレオ・ガリレイ</p>
  <p><span class="ex2">The flower</span> that blooms in adversity is the rarest and most beautiful of all./ウォ 
   ルト・ディズニー</p>
</div>

.ex2 {
  color:red;
}

id属性とは

概要

id属性とはclass属性とは異なり、HTML文書内の一つだけにしかつけることができません。

ですので、id名を複数のタグに反映したり、一つのタグ内に複数のidを指定することができません。

また、クラス名をCSSで指定する際には、「.」を前に記述する説明はしましたが、idでは「.」の代わりに「#」をid名の前に記載します。

具体的には

<div>
  <p id=”example1”>Hello World</p>
  <p id=”example2”>Hello World</p>
</div>

#example1 {
  color: green;
}
#example2 {
  color: green;
}

ページ内リンクとしての利用

id属性はページ内のリンクとしても利用することができます。

よくホームページとかで最後の方まで読み進めると、右下らへんに「topへ戻る」というボタンを見かけたことはありませんか？

まさにあれはid属性でtopにあるタグを指定することで実現している機能です。

具体的には

<p id=”top”>Top</h1>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<a href=”#top”>Topへ戻る</a>

まとめ

いかがだったでしょうか。

多少なりともid属性とclass属性の違いは理解いただけたのではないでしょうか。

HTMLを語る上では欠かせない要素でもあるので、是非とも違いを知っていただき、うまく使い分けていただけたらと思います。