CSSをHTMLにリンクする方法
CSSをHTMLにリンクする方法：link、style、@importとパスの修正
link要素でスタイルシートをリンクするか、style、インラインスタイル、@importを使います。相対パスと絶対パスをその場でテストし、CSSが読み込まれないときはチェックリストで確認しましょう。
CSSをHTMLにリンクする方法
CSSファイルをHTMLページにリンクするには、head内に<link rel="stylesheet" href="styles.css">を書きます。hrefはHTMLファイルからCSSファイルへのパスなので、cssフォルダー内のファイルならhref="css/styles.css"が必要です。CSSはstyle要素やstyle属性に書くこともでき、@importでファイルを読み込むこともできます。
ページにCSSを追加する4つの方法
- <link rel="stylesheet">
- head内
- ほぼすべて：多くのページで1つのファイルを共有
- <style>要素
- head内
- 小さなページ、クリティカルCSS、デモ
- style="..."属性
- 1つの要素に
- コードから設定する一度きりの値
- @import url(...)
- CSSファイルの先頭
- CSSをレイヤーやファイルに分割する
ページにスタイルが当たらないケースのほとんどは、link要素のパスか属性が原因です。このガイドではCSSを追加する各方法を紹介し、hrefが指す正確なURLを割り出すパスチェッカーを用意し、それでもスタイルが表示されないときのためのチェックリストで締めくくります。
- ブラウザーのアドレスバーに表示されているとおりに、HTMLページのアドレスを入力します。
- link要素に使ったhrefを入力します。
- チェッカーが、標準のURLルールに従ってブラウザー内で計算した、ブラウザーがリクエストする完全なURLを表示します。
- そのURLを新しいタブで開きます。CSSが表示されなければ、パスが間違っています。
- type="text/css"属性は省略可能です。ブラウザーが使うスタイルシート言語はCSSだけです。
- スタイルシートのリンクはheadに置きましょう。body内のリンクも許可されていますが、スタイルのない状態が一瞬表示されることがあります。
- media="print"のようなmedia属性を追加すると、その条件に一致するときだけスタイルシートが適用されます。
- 順番が重要です。2つのルールの詳細度が同じ場合は後から読み込まれたほうが優先されるので、自分のCSSはフレームワークの後にリンクしましょう。
よくある質問
CSSファイルがHTMLにリンクされないのはなぜですか？
まずパスを確認しましょう。ブラウザーの開発者ツールを開き、Networkタブで該当するCSSのリクエストを探します。404ならhrefが間違った場所を指しています。また、rel="stylesheet"のスペルが正しいか、ファイル名の大文字小文字が一致しているか、ファイルを保存したかも確認してください。
相対パスと絶対パスの違いは何ですか？
css/site.cssのような相対パスは、現在のページのフォルダーを基準に解決されます。/で始まるパスはサイトのルートを基準に解決され、https://で始まる完全なURLは正確なアドレスを指します。ディスクから直接ファイルを開いた場合、ルートパスは機能しません。
@importとlinkのどちらを使うべきですか？
linkを優先しましょう。各@importは、それを含むファイルのダウンロード後に初めて発見されるため、連鎖したインポートは順番に読み込まれます。@importはlayer()による順序付けや、いずれにせよファイルをまとめるビルドツール内で役立ちます。
hrefで1つ上のフォルダーに移動するには？
1階層ごとに../を使います。/blog/post.htmlにあるページから/css/site.cssのCSSを読むならhref="../css/site.css"、サイトがサーバー上で動いているならルートパスのhref="/css/site.css"を使います。
@importはどこに書く必要がありますか？
スタイルシートの一番上、他のどのルールよりも前です。その前に置けるのは@charsetと@layer文だけです。スタイルルールの後に置いた@importは無視されます。
ブラウザーがhrefを解決する仕組み
- ブラウザーはページ自身のURLから始め、ファイル名を取り除き、残ったフォルダーにhrefを適用します。../は1つ上のフォルダーへ、./は同じフォルダーにとどまり、先頭のスラッシュはサイトのルートからやり直します。
- ページをダブルクリックして開いた場合、ルートはプロジェクトではなくディスクです。そのため、/css/site.cssはサーバー上では動きますがfile://のアドレスでは失敗し、相対パスはどちらでも動きます。
インラインスタイルとstyle要素
- style要素はCSSをページ内に置くので、リクエストが1つ減り、最初の画面をスタイルする小さなクリティカルCSSに便利です。ただし個別にキャッシュできず、すべてのページで繰り返されます。
- style属性は1つの要素に適用され、!importantを使っていない限りスタイルシートのルールより優先されます。コードが計算する値に使い、通常のデザインには使わないでください。サイト全体で変更できなくなります。
link要素
スタイルシートを1つリンクしたページ
linkはhead内にあります。hrefはこのHTMLファイルからの相対パスなので、styles.cssは隣のcssフォルダー内にある必要があります。
style要素とインラインスタイル
埋め込みCSSとインラインCSSの併用
style要素はすべてのpに色を付けます。2つ目の段落のstyle属性は、その要素に対してだけ優先されます。
スタイルシート内の@import
インポートは最初に書きます。メディアクエリ、supports()条件、カスケードレイヤーを指定できます。
CSSが読み込まれない？このリストを順に確認
スタイルが適用されない理由と確認方法
- NetworkタブでCSSが404
- パスまたはフォルダーの誤り
- 上のパスチェッカーを使う、サーバー上ならルートパスを試す
- CSSのリクエスト自体がない
- relのタイプミス、またはlinkがHTMLの外にある
- rel="stylesheet"を正確に書く、linkをheadに置く
- ローカルでは動くが公開すると失敗
- ファイル名の大文字小文字が違う
- 古いスタイルが表示され続ける
- ブラウザーのキャッシュ
- ハードリロードするか、styles.css?v=2のようにバージョンを付ける
- 一部のルールが無視される
- 後のルールや詳細度の高いルールに上書きされている
- 要素を検証し、順序と詳細度を確認する
- @importが何もしない
- 他のルールの後に書かれている
- すべての@importをファイルの先頭に移動する
- コンソールでブロックされる
- 間違ったコンテンツタイプで配信されている
- サーバーは.cssファイルにtext/cssを送る必要がある
パスチェッカー
HTMLページのアドレス
link要素のhref
ブラウザーがリクエストするURL：
そのページアドレスは完全なURLではありません。https://またはfile:///で始めてください
これはディスク上のファイルです。/で始まるパスは、プロジェクトではなくドライブのルートを指します。
linkタグをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る