概要
課題のhtmlファイルはCSSが読み込まれていない状態です。
フォルダには作成済みのCSSファイルが含まれています。
CSSを読み込み、サイトにスタイルシートを反映させてください。
目的
CSSとHTMLがどのように連携しているかを理解する。
ヒント
HTMLでCSSを読み込むには、通常はheadタグ内にlinkタグを書きます。
記載例
<link rel="stylesheet" href="style.css">rel="stylesheet"は読み込むファイルがスタイルシートであることを示し、hrefにはCSSファイルまでのパスを書きます。
CSSが反映されたか確認する手順
- HTMLファイルとCSSファイルを両方保存します。
href="style.css"の場合は、HTMLファイルとstyle.cssが同じフォルダにあるか確認します。- HTMLファイルをブラウザで開き、再読み込みします。
- 変化が分かりにくいときは、CSSに一時的に
body { background-color: #fff4cc; }を追加して表示を確認し、確認後に削除します。
よくある間違い
- ファイル名が違う：
style.cssとstyles.cssは別の名前です。大文字・小文字も含めて確認します。 - フォルダ名が抜けている：CSSが
cssフォルダ内なら、href="css/style.css"と書きます。 - 保存前の内容を見ている：HTMLとCSSを保存してからブラウザを再読み込みします。
- パソコン内の絶対パスを書いている：
C:\...のような自分のパソコンだけで通じる場所ではなく、HTMLから見た相対パスを使います。
フォルダをまたぐ相対パスに迷ったら、リンク・パス練習 中級で練習できます。公開後だけCSSが反映されない場合は、HTML・CSSで作ったページを公開する方法の確認手順も参照してください。
参考：MDN「<link>: 外部リソースへのリンク要素」（2026年10月7日確認）
データ
使用ソフト
VisualStudioCode
