はじめに
HTMLファイルにCSSを適用するためには、<link rel="stylesheet" href="..."> の記述が必要不可欠です。今回は、特に以下の形式：
<link rel="stylesheet" href="css/style.css">
に絞って、基本的な動作や注意点を自分の学習のためにまとめました。
書こうと思ったきっかけ
外部CSSファイルを読み込んだつもりが全く反映されず、原因を調べた結果 href のパスや記述場所に問題があったことに気づきました。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
初歩的な部分ですが、確実に理解しておきたいと思い備忘録としてまとめます。
内容の説明
rel="stylesheet" とは？
-
rel属性は、このリンクが「どのような関係性のリソースか」を示すもの。 -
stylesheetを指定することで、外部のCSSファイルであることをHTMLに伝える。
href="css/style.css" の意味
-
hrefは読み込むCSSファイルの場所（パス）を示す。 -
css/style.cssは、HTMLファイルと同階層にあるcssフォルダ内のstyle.cssを読み込むという意味。 - パスの指定ミス（例：フォルダ名のスペル間違いやパスの階層違い）はCSSが読み込まれない原因になる。
<head> タグ内に書く理由
- CSSファイルはHTMLの読み込み時に最初から適用される必要があるため、
<head>内で指定する。 -
<body>の後ろに書くと、スタイルが一瞬適用されず崩れた表示になることもある。
まとめ
- CSSを読み込む基本形：
<link rel="stylesheet" href="css/style.css"> - 正しいパスを指定することが最重要
-
<head>内に忘れずに記述
この1行があるかないかで、見た目の整ったWebページになるかどうかが決まる。
今後もHTMLを書く際には、必ず確認するようにしていきたいです！*