演習課題「クラス名と固有名を同時に指定してみよう」
現在、ブラウザには、ぱいじょ登場キャラクターのうち、生徒の3人について表示されるサイトが表示されています。
3人の名前を囲むspanタグにclass属性として、生徒である事を示すstudentを、id属性として、3人それぞれの名前、kirishima、rokumura、midorikawaを指定し、表示が変更されるようコードを修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※ここでは、class、idの順に記載してください。
＃06:class属性とid属性の違い
このチャプターでは、class属性とid属性の違いについて学習します。
class属性とid属性はどちらも要素のスタイルを指定するためによく利用されます。
class属性とid属性は用途の上では似ていますが、実際には多くの違いがあります。
まず、id属性はページ内リンクに使用できますが、class属性は使用することができません。
これは要素とその要素に使うidの名前が一意に定まっているため、リンクを貼ることができる一方、classではその名前に対応する要素が一意に定まらないので、リンクを貼ることができないからです。
次に、id属性は固有のものなので、同じclass属性の属性値が何度も使えるのに対し、同じid属性の属性値は使うことができません。
また、id属性の属性値は空白もまとめて一つの文字列として扱ってしまうため、class属性のように属性値を複数持たせることもできません。
スタイルの適用では、idセレクタによって指定されたルールが classセレクタの記述を上書きすることがあります。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
#orange{color: red;}
.fruit{color: blue;}
</style>
</head>
<body>
<p><span class="fruit">りんご</span>は果物です。</p>
<p><span class="vegetable">スイカ</span>は野菜です。</p>
<p><span class="fruit" id="orange">みかん</span>は果物です。</p>
<p><span class="vegetable">いちご</span>は野菜です。</p>
</body>
</html>