演習課題「外部スタイルシートを利用してみよう」
現在、外部スタイルシートを利用してh1要素とp要素の文字に色をつけようとしています。
HTMLのコードと同じディレクトリ内に外部のスタイルシートであるstyle01.cssが用意されています。style01.cssを使用して文字に色をつけるため、head要素内にlink要素を記述してください。
その際、rel属性ではstylesheetを指定します。
また、href属性は相対パスを使って記述してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃04:外部スタイルシートの適用
このチャプターでは、外部スタイルシートの適用について学習します。
外部スタイルシートは、HTML文書とは異なるファイルに記述したスタイルシートを、link要素を用いてリンクしたものを指します。
複数のファイルにスタイルシートを適用できるため、スタイルシートを書き換えるだけで指定した全てのHTML文書に適用されます。
このようにスタイルを一括管理できるためにメンテナンス性が高く、現在主に使用されている適用方法となっています。
link要素にはグローバル属性としてhref属性とrel属性があり、その2つを用いて外部スタイルシートと文書を結びつける事が可能になります。
具体的には、href属性では外部のスタイルシートが存在するファイルのURLを、rel属性ではstylesheetを指定します。
なお、ファイルを指定するURLは絶対・相対のどちらのパスでも大丈夫です。
MDN web docs
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Getting_started#%E5%A4%96%E9%83%A8%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88
相対パスとは、現在のファイルから目的のファイルまでの相対的な位置関係を記述する方法です。
現在のファイルから目的のファイルまで、経由するディレクトリの道筋・ゴール地点のファイル名をデリミタで連結して記述します。
ファイルによっては上位のディレクトリを経由する必要もありますが、その場合は..で一階層上位のディレクトリを表すことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部スタイルシート</title>
<link rel="stylesheet" href="style01.css">
</head>
<body>
<article>
<h1>外部スタイルシートを設定する</h1>
<p>link要素を用いて外部スタイルシートを設定できます</p>
</article>
</body>
</html>