CSSを外部ファイルで読み込む方法

小さなページであればstyle属性やstyleタグに直接CSSを書くこともできますが実際の制作では外部ファイルにまとめて管理する方法が一般的です。外部CSSにしておくと複数ページで同じスタイルを使い回せるため更新が楽になりブラウザのキャッシュも効きやすくなります。

head内でlinkタグを使う

外部CSSを読み込む時はHTMLのhead内にlinkタグを記述します。rel属性にstylesheetを指定しhref属性にCSSファイルへのパスを書きます。ファイルをcssフォルダなどにまとめておくと管理しやすくなります。

See the Pen CSSを外部ファイルで読み込む方法 by Syo Yanai (@h1-tech-japan) on CodePen.

パス指定とフォルダ構成を意識する

相対パスと絶対パスの考え方を早めに理解しておくと画像やスクリプトを読み込む時にも役立ちます。プロジェクトの最初にcssimagesjsといったフォルダ構成を整えCSSファイルは必ず外部読み込みにしておくと規模が大きくなっても迷いにくい構成になります。