今回はHTMLファイルに外部スタイルシート(CSSファイル)を読み込む方法を解説します。
HTMLファイルからCSSファイルをリンクすることでホームページにスタイルを当てることができます。
リンクの書き方やうまく紐付けできないときの確認ポイントも解説するので最後までじっくりご覧ください。
HTMLにCSSの外部ファイルを読み込む方法
HTMLファイルからCSSファイルをリンクして読み込めるようにするにはlinkタグを使用します。
書き方はこんな感じ。
<link rel="stylesheet" href="./style.css">rel: リンクしたものがどんなものであるかを定義href: ここにリンクURLを記入
relにはリンクしたものの種類を書きます。CSSファイルの場合はstylesheetと決まっています。
hrefにはリンクURLを記入します。以下で詳しく解説しますが、リンクにはHTMLファイルから相対的な位置にある「相対パス」とどこからでも同じ「絶対パス」があります。
このlinkタグをheadの中に配置すればCSSファイルを読み込む（インポートする）ことができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>HTMLファイルの中身</h1>
</body>
</html>これで読み込むことができました。さっそくCSSコードを書いてちゃんと読み込めてるか確認してみます。コード書く前はこんな感じ。
/* style.css */
h1 {
color: red;
}CSSコードを書いてファイルを保存した後、ブラウザを更新してみます。文字が画像のように赤色になっていれば成功です。
linkタグに書くURLの書き方は次の2つがあります。
- 相対パスでCSSファイルをリンクする
- 絶対パスでCSSファイルを読み込む
リンクURLの書き方について以下で解説します。
相対パスでCSSファイルをリンクする
上記の例では外部スタイルシート(style.css)をHTMLと同じフォルダに配置し、linkタグにはHTMLからの相対的な位置を記入しました。
これを相対パスと言います。
仮にHTMLファイルを「my-folder」というフォルダに入れている場合、CSSファイルの位置はHTMLと同じフォルダの同じ階層に入れることになります。
my-folder
- index.html
- style.cssもし以下のように別のフォルダに入れている場合は書き方が少し変わります。
my-folder
- assets
- style.css
- index.html<link rel="stylesheet" href="./assets/style.css">同じ階層のassetsフォルダのstyle.cssという意味です。さらに別のフォルダ構造の場合は、
my-folder
- assets
- style.css
- pages
- index.html<link rel="stylesheet" href="../assets/style.css">この場合、index.htmlはpagesというフォルダに入っているので、一度上の階層(my-folder)に戻ってからassets/style.cssにアクセスします。
../と書くと1つ上に戻ります、./だと同じ階層になります。次のような場合はどうでしょうか。
my-folder
- assets
- css
- style.css
- pages
- top
- index.html<link rel="stylesheet" href="../../assets/css/style.css">2つ上に戻って、そこからassets/css/style.cssというふうに下っていく感じですね。
相対パスは登り降りをイメージすると簡単に理解できると思います。
絶対パスでCSSファイルを読み込む
相対パスの他に絶対パスで書く方法もあります。
絶対パスはドキュメントルートからのファイルの完全なURLになります。
ドキュメントルートはドメインを当てているフォルダです。例えばドメインがmy-site.comで最初の例のように一番上の階層(ドキュメントルート直下)にCSSファイルを置いている場合次のようになります。
<link rel="stylesheet" href="https://my-site.com/style.css">では先ほどのような深い階層の場合はどうでしょうか。my-folderをルートフォルダとすると次のようになります。
my-folder(ドキュメントルート)
- assets
- css
- style.css
- pages
- top
- index.html<link rel="stylesheet" href="https://my-site.com/assets/css/style.css">相対パスのときとは違ってindex.htmlがどの位置にあってもURLの書き方は変わりません。
どこからでも同じURLでリンクできるので、例えばHTMLとCSSファイルが違うサーバーにあっても読み込むことができます。
CSSファイルがうまく読み込めない原因と解決方法
ここからはCSSファイルがうまくリンクできない場合の原因と解決方法を解説します。
linkタグをちゃんと入れてるのにCSSが反映されなかったり、デベロッパーツールでエラーが出てしまうのは次のような原因が考えられます。
- リンクURLが間違っている
- URLの場所にCSSファイルがない
- HTMLタグが正しく設置されていない
リンクURLが間違っている
一番可能性が高いのがリンクURLが間違っていることです。
CSSが画面に反映されなかったり、devtoolsでエラーが出る場合はまずURLを確認しましょう。
絶対パスで書いている場合、書き間違いがないかチェックします。
相対パスで書いている場合、正しい階層になっているかを確認してください。
URLの場所にCSSファイルがない
URLは問題ないのにCSSが反映されない場合は、URLとして指定した場所にCSSファイルが存在するかチェックします。
意外とアップロードし忘れていたり、ファイル名を間違っていたりすることもあります。
HTMLタグが正しく設置されていない
URLに問題がない場合はHTMLタグが正しく設置されているかを確認します。
hrefをrefにしていたり、タグが閉じられていなかったりするとエラーの原因になります。
まとめ
ここまでHTMLファイルから外部にあるCSSスタイルシートをリンクする方法を紹介しました。内容をまとめると次のようになります。
- CSSファイルを読み込むには
linkタグを使う - URLの書き方は相対パスと絶対パスがある
- CSSが反映されないときは、URLやHTMLタグの書き間違いを確認する
書き間違いなどのケアレスミスはよくあることなので、すぐにエラーの原因を見つけてデバッグできるようになっておくと作業がはかどります。