WEBサイトの構築において基本的な言語である｢HTML」。
今回はコーティングする上で必ず必要な知識である、｢class｣、｢id｣の違いについてご紹介していきます。
ぜひ最後までご覧ください
class属性とid属性の違い
class属性とid属性は、要素にスタイルやスクリプトを適用するために使用される属性です。
またどちらもHTMLのタグに名前をつける役割を担っています。
class属性は複数の要素に特定のスタイルやスクリプトを適用するために使用されるのに対して、id属性は特定の要素に対して適用するために使用されるため、両者は様々な点で役割が微妙に異なっています。
「スクリプト」とは、ウェブページ上で動的な動作を行うために使われるプログラムのことです。主にJavaScriptが使用されますが、他のスクリプト言語も存在します。JavaScriptに関してはこちらの記事で詳しくご紹介しています！
class属性とは
class属性は主に2つの特徴を持っています。
- 1ページ内で同じクラスを何度も使用することができる
- 同じタグに異なるクラスを指定することができる
1ページ内で同じクラスを何度も使用することができる
クラスは何度でも使用することができるため、ページ内で使いまわしたい装飾などがある場合クラスを選択すると便利です。
<h1 class="title">h1のタイトルです</h1>
<h2 class="title">h2のタイトルです</h2>同じタグに異なるクラスを指定することができる
同じタグに異なるクラスを指定するには、クラスの間に半角スペースを取ります。
<div class="text red large">半角スペースを取ります</div>id属性とは
id属性は主に4つの特徴を持っています。
- ページ内で同じid名を使用することができない
- 同じタグの中に異なるidを指定することができない
- CSSの優先順位はid属性が優先される
- ページ内リンクを作成できる
ページ内で同じid名を使用することができない
クラスでは何度でも使用することが可能でしたが、idは同じHTMLファイルの中で使用できるのは1回だけです。
間違ったidの使用例(id名が重複している)
<div id="text">テキスト1です</div>
<div id="text">テキスト2です</div>正しいidの使用例(id名が重複していない)
<div id="text1">テキスト1です</div>
<div id="text2">テキスト2です</div>同じタグの中に異なるidを指定することができない
クラスでは同じタグに異なるクラスを指定することができました。
しかしidはそういった指定をすることはできません。
間違ったidの使用例(idは1つしか指定できない)
<div id="text red large">半角スペースを取ります</div>CSSの優先順位はid属性が優先される
コードを書く際にid名とクラス名を同時に指定した場合、id属性が優先されます。
例えば同じタグにid、クラスで違う文字の色を指定したとき、優先される装飾はidで指定した方です。
<p id="yellow" class="green">文字の色は緑ではなく黄色になる</p>ページ内リンクを作成できる
ページ内リンクとは同じファイル内にある特定の箇所まで移動することができるリンクのことを言います。
例えば<a>タグを使い#serviceのリンクを貼ると、同じページ内のserviceid属性がある箇所まで飛びます。
<a href="#service">サービスまでジャンプする</a> <a>タグを使いリンクを貼る
<!-- その他コンテンツのコード -->
<div id="service">ここまで飛ぶ</div> ここのidまでジャンプできるまとめ
今回は｢class｣、｢id｣の違いについてご紹介しました。
いかがでしたでしょうか？
一見違いがないようにみえるものですが、この2つには異なる点があることが認識できたと思います。
違いを理解し、きちんと知識を深めた上で記述できるようにしていきましょう。
別投稿にてHTML/CSSについての基本知識や、コーディングに役立つ知識についてご紹介していますので、皆さん是非そちらもチェックしてみてください！
コメント