ID/class属性とグローバル属性

https://www.youtube.com/watch?v=ZjrRyhKCYuU

セレクターには、タグ名の他にもさまざまな条件を指定することができます。例えば、次のケースを考えてみましょう。

<p>ともすた</p>
<p>HTML入門</p>
<p>CSS入門</p>

そして、CSSには次のように記述します。CSSは外部参照で記述しましょう。

p {
  color: white;
  background-color: green;
}

すると、次のように各要素が緑色の背景になります。

この時、同じ<p>要素を使っていても装飾を分けたい場合があります。この時使えるのが、id属性と class属性です。

HTMLには「属性」があるとは既に紹介しましたが、属性はタグによって使える属性・使えない属性がありますが、id/class属性はタグに関わらずに使える「グローバル属性」と呼ばれ、ほとんどの要素で利用できます。

グループを表すclass属性

まずは、class属性を使ってみましょう。HTMLを次のように変えてみます。

<p>ともすた</p>
<p class="lesson">HTML入門</p>
<p class="lesson">CSS入門</p>

そして、次のようなCSSを追加します。

p.lesson {
  background-color: red;
}

これで、2ヶ所の<p>が同じスタイルになりました。

「.」がclassを表すセレクターで、HTMLのタグに付加した class属性を指定すると、その classの要素にだけ適用されるスタイルを記述することができます。

タグの種類を区別しないセレクター

例えばここに、次のような<div>タグを追加してみましょう。

<div class="lesson">divです</div>

この<div>タグは、同じlessonクラスですが、スタイルは効きません。

これは、セレクターの先頭でタグを絞り込んでいるためです。

p.lesson {

タグの種類を絞らずに、class属性のみでグループにしたい場合はセレクターを「.」から始めることができます。

.lesson {

これで、<div>にも同じスタイルが適用されました。

その要素を特定するid属性

CSSで使えるグローバル属性には、idも使えます。最初の<p>要素を次のように変更してみましょう。

<p id="tomosta">ともすた</p>

そして、CSSのセレクターを次のようにしてみましょう。

p#tomosta {
  font-size: 200%;
}

すると、id属性を付加した要素にだけスタイルが適用されます。

「#」という記号が、id属性を表す記号で、この後にid名を指定すると、そのidにのみスタイルを適用することができます。

ただし、id属性には同じページ内で1つしか使えないと言うルールがあります。「id」はよく会員情報などで利用される言葉で、「Identification=識別」という意味の英語の略です。そのため、idが重複してしまって識別できなくなると本来の用途から外れてしまうため、1つしか使えないというルールがあるのです。

複数の要素で同じスタイルを利用したい場合は、代わりに「class属性」を利用します。

id属性は無理に利用しなくてOK

id属性とclass属性は、「1カ所の場合はid, それ以上の場合はclass」と使い分けることもできますが、1カ所しかない場合もclass属性を利用することができます。そして実際、CSSの場合はclass属性だけを使う方が使い勝手が良いでしょう。

id属性は、JavaScriptで利用されることが多いため、CSSを作る際にはid属性を使わないという方針でも問題ありません。

ともすたチャンネルに
チャンネル登録する