
あらすじ
CSS をHTMLに反映する際に
- 外部ファイルから反映する方法
- インファイルで反映する方法
- インラインで反映する方法
の3つの方法がありました。
詳しくはこちらの記事をご覧くださいfa-arrow-circle-down
その中のインファイルと外部ファイルから反映する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;
}
Hello World
Hello World
といった感じで、クラス名が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;
}
Hello World
ex2
Hello World
ex3
Hello World
ex4
Hello World
ブロック要素に反映
またブロック要素の親となる部分にクラス名を指定した場合、そのブロック全体に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;
}
Once I made a decision, I never thought about it again. /マイケル・ジョーダン
と、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;
}
The flower that blooms in adversity is the rarest and most beautiful of all.
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;
}
Hello World
ページ内リンクとしての利用
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>
Hello World
Hello World
Hello World
Hello World
まとめ
いかがだったでしょうか。
多少なりともid属性とclass属性の違いは理解いただけたのではないでしょうか。
HTMLを語る上では欠かせない要素でもあるので、是非とも違いを知っていただき、うまく使い分けていただけたらと思います。