演習課題「汎用コンテナを設定してみよう-その1」
現在、霧島京子、六村リオ、緑川つばめと表示しています。
3人の名前が記述されている範囲だけ、背景色を黃色にしようとしています。
3人の名前の段落をdivタグで囲み、class属性としてcharacterを設定することで表示を変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
演習課題「汎用コンテナを設定してみよう-その2」
現在、霧島京子、六村リオ、緑川つばめと表示しています。
3人の名前が記述されている範囲だけ、背景色を黃色にしようとしています。
3人の名前の段落がdivタグで囲まれているので、style属性としてstyle="background: #ffff00;"と設定することで表示を変更して下さい。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃08:汎用コンテナ
このチャプターでは、汎用コンテナを表すdiv(ディブ)要素について学習します。
<style>
.item{
background: #00ff00;
}
</style>
div要素は特定の機能を持たない汎用コンテナを表す要素です。
つまりドキュメントを分割して、個別のセクションに分けるためのものであり、他に適切なタグがない場合に用いる、意味を持たないHTMLの要素です。
divタグは純粋な構造化のための機能として使うことができるだけではなく、class属性を使ってラベル付けすることで、divで囲んだ範囲だけのデザインを指定できるなど、より効果的に用いることができます。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Element/div
divタグにはclass属性やstyle属性、id属性など、さまざまな属性があります。今回はその中でも特に重要なclass属性とstyle属性について扱います。なお、これらはdiv特有の属性ではなく、様々なタグで同じ役割を持つ属性として使用されるグローバル属性です。
class属性はdivタグで定義された範囲に、あらかじめ定義されたdivタグのクラスのスタイルを指定することが可能になる属性です。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes#class
style属性は属性値に、プロパティとその値のリストを記述することで、divタグのコンテンツのスタイルが直接定義できる属性です。
MDN web docs
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/style
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.item{
background: #00ff00;
}
</style>
</head>
<body>
<div class="item">
<p>剣</p>
<p>盾</p>
<p>杖</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div style="background: #00ff00;">
<p>剣</p>
<p>盾</p>
<p>杖</p>
</div>
</body>
</html>