演習課題「クラス名を指定してみよう」
現在、ブラウザでは、霧島京子、黒田先生、猫先生と表示されています。
ここで、霧島京子さんは生徒であり人間です。また、黒田先生は先生であり人間です。そして、猫先生は先生であり猫です。
生徒にはstudentクラス、先生にはteacherクラスを指定した後、人間にはhumanクラス、猫にはcatクラスを指定して表示を変更してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃04:クラス属性(class)
このチャプターでは、class要素について学習します。
class属性は要素のクラス名を指定するグローバル属性です。
クラス名は要素の分類やスタイルシートの適用に利用されます。
属性値は複数指定することが可能で、半角スペース区切りで複数のクラス名を指定します。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/class
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.a_column{
background: #E2E8B9;
}
.ka_column{
background: #f4f4f4;
}
.sa_column{
background: #99C6F1;
}
.hiragana{
border-bottom: 3px solid #000;
}
.katakana{
border-bottom: 3px dotted #000;
}
</style>
</head>
<body>
<div class="a_column hiragana">あいうえお</div>
<div class="ka_column katakana">カキクケコ</div>
<div class="sa_column katakana">サシスセソ</div>
</body>
</html>