演習課題「インラインスタイルシートを利用してみよう」
現在、インラインスタイルシートを利用してh1要素とp要素の文字に色をつけようとしています。
文字に色をつけるため、article要素中のh1要素とp要素にstyle属性を記述してください。
その際、プロパティにはcolorを使用します。
また、値としてh1要素には#f5a1b3を、p要素には#c79163を指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃03:インラインスタイルシートの適用
このチャプターでは、インラインスタイルシートの適用について学習します。
インラインスタイルシートは、グローバル属性であるstyle属性を用いてCSSの設定を値として記述したものを指します。
インラインスタイルシートは部分的にスタイルを優先指定したり、テスト的に素早くスタイルを適用する場合には便利です。
一方で、メンテナンス性が悪くなる等の欠点があるため、一般的には外部スタイルシートを作成してlinkタグで適用することが推奨されています。
また、style属性はあくまで見た目・装飾に関する情報を設定するものです。文書は、スタイルの有無に関わらず意味が一貫している必要があります。
理由は、スタイルがすべて削除されてもページが情報を意味的に正しく伝える必要があるためです。
そのため、『無関係な情報を隠すためにhidden属性ではなく、style属性を使う』といったコードの記述は原則おこなってはいけません。
MDN web docs
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>インラインスタイルシート</title>
</head>
<body>
<article>
<h1 style="color: red;">インラインスタイルシートを設定する</h1>
<p style="color: blue;">style属性を用いてインラインスタイルシートを設定できます</p>
</article>
</body>
</html>