CSSの外部スタイルシートがHTMLで読み込めないときに考えられる原因を現役デザイナーが解説【初心者向け】

初心者向けにCSSの外部スタイルシートがHTMLで読み込めないときに考えられる原因について解説しています。現在、スタイルシートは外部から読み込むのが一般的となっています。HTMLで外部CSSを読み込む際の基本の書き方、読み込めない場合の原因と対処法について学びましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

ここでは、外部にスタイルシートを作成する方法と、外部スタイルシートが適用されない場合の対処法を紹介します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

外部スタイルシートがHTMLで読み込めないときに考えられる原因について詳しく説明していくね!

大石ゆかり

お願いします!

 

CSSの外部スタイルシートとは

CSSを適用する場合には、HTMLファイル内に書く方法と、CSSファイルを別に作成して、HTMLファイルからCSSファイルを読み込む方法があります。

この別に作成したCSSファイルのことを外部スタイルシート(外部CSS)といいます。外部スタイルシートを使用すれば、複数のページのデザインを1つのCSSで管理することができ、効率的にWebサイトを作成したり、更新したりすることができるので、Webサイトを作成する場合には外部スタイルシートを用いることが一般的です。

 

外部スタイルシートの書き方

外部スタイルシートの作成方法は、HTMLファイルと同様、テキストエディタを使用して、〇〇〇.cssというファイル名で保存します。CSSファイルには、セレクタ{プロパティ: 値;}という形式で、HTMLのレイアウトや色、サイズなどの設定をしていきます。

次に、作成した外部CSSをHTMLから読み込ませます。HTMLの<head>内に下記のコードを追加します。

<link rel="stylesheet" href="読み込ませるCSSファイルのパス">

ここで重要なのが、「読み込ませるCSSファイルのパス」です。ファイルのパスとは、ファイルの位置を示すもので、絶対パスや相対パスなどがありますが、ファイルの住所のようなものです。

住所を間違えると郵便物が届かないのと同じで、ファイルのパスを間違えると、ファイルを読み込むことができません。

例えば、index.htmlに、同じ階層にあるstyle.cssファイルを読み込ませる場合は以下のようになります。

<link rel="stylesheet" href="./style.css">

例:

ファイルのパスについて詳しくは絶対パスと相対パスの違いをご覧ください。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

外部スタイルシートがHTMLで読み込めないときに考えられる原因

うまくCSSが適用されていない場合、いくつかの原因が考えられます。

  1. HTMLに書いたCSSのファイルのパスを間違えている
  2. CSSを読み込むタグを間違えている(スペルミスや全角スペースの混入など)
  3. 実はCSSファイルは読み込めているが、CSSの記述に誤りがある(またはCSSファイルが保存できていない)

などの原因が考えられます。

原因を探る場合には、

  1. まず、ディベロッパーツールでWebページを確認(GoogleChromeならブラウザ内を右クリック→検証で表示できます)
  2. ディベロッパーツールの「Console」をクリックすると、エラーの内容と場所が表示される

一番よくあるケースは、「CSSファイルのパスを間違えている」です。CSSファイルのパスを間違えている場合には、Consoleに下記のように表示されます。

 

GET ******/style.css net::ERR_FILE_NOT_FOUND

style.cssファイルは見つかりませんでした。

(ファイルのパス通りの場所に、ファイルがありません)

index.html:5

index.htmlの5行目が原因です。

 

例:CSSのファイルパスを間違えた場合のエラー(ディベロッパーツール)

CSSファイルのパスや、HTMLのタグに間違いがない場合には、ディベロッパーツールにはエラーとして表示されませんので、CSSファイルは読み込めているが、CSSの記述に誤りがあり適用されていない、を疑います。CSSの記述が正しいか、セレクタが正しいかを確認します。

今回は、外部CSSの読み込み方、外部CSSがうまく読み込めない場合の原因を探す方法について紹介しました。

 

監修してくれたメンター

メンター 橋本真理

フリーのweb/グラフィックデザイナー

会社・店舗・自治体等のwebサイトのデザインから制作一式、ロゴや各種広告などのグラフィックデザインを主に活動。TechAcademyではWebデザインコース・WordPressコースを担当しています。

ラジオとバナナが好き。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。