Webデザイン
スポンサーリンク

あらすじ

CSS をHTMLに反映する際に

  • 外部ファイルから反映する方法
  • インファイルで反映する方法
  • インラインで反映する方法

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

詳しくはこちらの記事をご覧ください

 

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

 

memo
インラインで反映する方法では対象物にそのまま記載する形なので、わざわざ目印となる属性を記載する必要がありません。

 

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

 

スポンサーリンク

class属性とは

 

クラス

 

概要

 

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

 

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

 

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

 

複数のタグに同時に使用

 

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

 

例えば、

 

HTML文書
<p class="ex1">Hello World</p>
<p class=”ex1”>Hello World</p>
<p class="ex1">Hello World</p>

 

CSS文書
.ex1 {
color:blue;
}

 

結果
Hello World
Hello World
Hello World

 

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

 

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

 

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

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

 

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

 

HTML文書
<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>

 

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

 

結果
ex1

Hello World

ex2

Hello World

ex3

Hello World

ex4

Hello World

 

ブロック要素に反映

 

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

 

具体的には

 

HTML文書
<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>

 

CSS文書
.ex1 {
color: gray;
}

 

結果
Every day People straighten up the hair, why not the heart?/チェ・ゲバラ
Once I made a decision, I never thought about it again. /マイケル・ジョーダン

 

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

 

インライン要素に反映

 

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

 

どういうことかというと

 

HTML文書
<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>

 

CSS文書
.ex2 {
color:red;
}

 

結果
You cannot teach a man anything, you can only help him find it within himself
The flower that blooms in adversity is the rarest and most beautiful of all.

 

スポンサーリンク

id属性とは

 

id

 

概要

 

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

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

 

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

 

memo
id名を名付ける際のルールはクラス名をつけるルールと同じです。

 

具体的には

 

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

 

CSS文書
#example1 {
color: green;
}
#example2 {
color: green;
}

 

結果
Hello World
Hello World

 

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

 

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

 

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

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

 

具体的には

 

HTML文書
<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>

 

Top

Hello World
Hello World
Hello World
Hello World

Topへ戻る

 

まとめ

 

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

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

 

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

 

スポンサーリンク

Twitterでフォローしよう