ケケンタ

この記事では、CSSが反映されない原因と各対処・確認方法について解説していきます。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

はじめに｜CSSが反映されない原因を解消するために大切なこと

解説を始める前に、最初に知っておいていただきたいことがあります。

それは、CSSが反映されない原因を解消しようと動き始める前に、まずは正しい状況を真っ先に調査することがもっとも大切ということです。

その理由は、現在の状況が①と②どちらなのかによって、対処方法が変わるためです。

以下よりご紹介する「５つの方法」の見出しの後ろに振ってある（★）または（☆）の記号は、「上記２点いずれかの原因にひもづく対処法」であることを示しています。

現在もCSSが反映されずにお困りという方は、まずは起こっている現象が①と②のどちらなのかをはっきりさせた上で対処法をご確認いただければと思います。

ケケンタ

ちなみに、原因確認にはGoogle chromeの検証ツール（通称デベロッパーツール）を利用するのがおすすめです。

詳しい確認方法と各反映状況に対する対処方法については以下の記事でお伝えしていますので、やり方が分からないという方はぜひ参考にしてみて下さい。

あわせて読みたい

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】 今回は Google chromeの検証ツールを使用してCSSの反映状況を確認する方法+CSSが反映されていないときの対処方法 について解説をします。 なお、CSSが反映されない原因…

Web制作の副業にご興味のある方には以下の記事もおすすめです。

あわせて読みたい

【独学】Web制作で副業｜ココナラで初案件を獲得するまでの全工程 Web制作を副業として始めている人が増えているけど、具体的に自分も案件を取れるようになるためにはどうすればいいの…？独学でも可能なの…？ 今回はこのようなお悩みを…

CSSが反映されない原因

CSSが反映されない主な原因は５つあります。

ケケンタ

各原因の詳細とその対処方法について順番にお伝えしていきます！

原因１｜CSSのファイルのパスの指定が間違っている（★）

CSSを別ファイルに記述している場合、HTMLのheadタグ内に以下のような記述をしてCSSファイルを読み込む必要があります。

<link rel="stylesheet" href="ファイル名.css">

上記の「ファイル名.css」で、CSSファイルまでのパスを絶対パスもしくは相対パスで記述する必要があります。

ここの指定内容に誤りがあると、CSSファイルを正しく読み込むことができません。

したがって、CSS自体がまったく読み込まれていない方については、

まずは、CSS読み込みで記述しているパスが正しいかどうか確認することをおすすめします。

ケケンタ

絶対パスと相対パス、またCSSの読み込み方法については以下の記事でそれぞれご説明しています。

あわせて読みたい

【HTML】パスとは？CSSが反映されない原因｜相対パスと絶対パス【初心者】 CSSが上手く反映されない…… とお困りの方へに向けて、この記事ではCSS読み込みの基本となるパスについて詳しく解説していきます。   この記事で分かること パスとは何か…

あわせて読みたい

【HTML】CSSを読み込む「３つ」の方法を紹介！方法別メリット・デメリット この記事ではHTMLへのCSS読み込み方法を「３つ」解説していきます！  この記事でわかること CSSファイルをHTMLファイルに読み込む方法（＝外部ファイル読み込み） CSSを…

原因２｜文法的な誤りがある（☆）

CSSファイルの読み込み自体に問題が無かったり、「HTMLファイル内に直接記述している」という状況であったとしても、CSSの記述内容に文法的な誤りがあると正常に反映されない場合があります。

例えば以外に見落としがちなのが、単位の記述ミスや行末のコロンの付け忘れです。

特に行末のコロンが抜けていると、コロンが抜けている行のCSSとその直後のCSSについては、正しく書けていたとしてもHTMLに反映されません。

以下はVSCode上で記述した例です。

エラー部分が赤い波線で強調されています。

自分は大丈夫と思っていても思わぬところで記述ミスをしてしまっていることがありますので、

ケケンタ

一部のCSSだけ反映されない……

という方は、「反映させたいのに反映されない」と思っているプロパティ記述を中心に再度見直しをしてみると良いかもしれません。

記述ミスによって上手くいかないパターンがある意味もっとも厄介です。

こういったパターンでは、書いたCSSがそもそもブラウザ側に読み込まれているのか、読み込まれていないのかを確認することが問題解消の早道です。

以下の記事でGoogle chromeの検証ツール（通称デベロッパーツール）による確認方法をお伝えしていますので、確認方法が分からないという方はぜひ一度ご覧になって下さい。

あわせて読みたい

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】 今回は Google chromeの検証ツールを使用してCSSの反映状況を確認する方法+CSSが反映されていないときの対処方法 について解説をします。 なお、CSSが反映されない原因…

原因３｜キャッシュが残っており、最新のCSSファイル情報が反映されない（☆）

Google Chromeのようなブラウザにはキャッシュと呼ばれる仕組みが利用されています。

つまり、キャッシュ（ここでは「一時ファイルそのもの」と理解していただいて大丈夫です）が残っていると、CSSファイルを編集しても、ブラウザには即時に最新の内容が反映されないということです。

特に、それまで正常にCSSの編集内容がHTML側に反映されていたのに、編集後の一部の内容だけが反映されていないという状況の場合、キャッシュが残っている可能性が高いです。

キャッシュ残りの対処方法

キャッシュを削除して再度ページを更新する（読み込む）

ケケンタ

以下より具体的な方法をご説明します。

キャッシュを無視して最新情報を読み込む「３つ」の方法

「３つ」の方法

上記の中ではショートカットキーを使用してスーパーリロードする方法が一番手っ取り早いです。

スーパーリロードを実行するショートカットキーの一覧

ちなみにF5キーは「通常のページ更新」のショートカットキーです。
F5キーが反応しないという方は、同時に「Fn」キーも押してみてください。

スーパーリロードを実行することでキャッシュを無視して最新のCSS情報が読み込まれます。

なお、スーパーリロードを実行しても最新の内容が反映されない場合は、別の原因が考えられます。

ケケンタ

僕はよく「Shift + F5」でスーパーリロードをしています。
……が、理由はよく分からないのですが、１度だけスーパーリロードしても何故か最新情報が即時反映されないことがあるため、そういうときは適当に3回ぐらい「Shift + F5」を試しています。

原因４｜CSSの仕様に反する使い方をしている（☆）

初心者の方で意外とあるのが、「CSSやHTML的には正しく反映されている」にも関わらず、見た目に変化が無いせいで「反映されていない」と思い込んでしまうケースです。

この場合、ある程度慣れてきた方ならばすぐに気がつけるのですが、初心者の方は特にハマりやすいです。

例えば、「あるテキストを親要素の垂直中央揃えにしたい」というときに「vertical-align: middle;」を指定したとします。

しかし、vertical-alignはインライン要素にしか適用されないため、うっかりブロック要素に対して指定してしまうと

「ちゃんと書いてるのに中央に来ない！　CSSが反映されてないんだ！」

と誤解しがちです。

本当の原因は、CSSの仕様に反する使い方をしてしまっていることなのですが、「CSSが反映されていない」と誤った判断をしてしまい、沼にハマるという流れです。

ケケンタ

CSSはプログラミング界隈では難易度が低めと言われていますが、各プロパティの仕様を正しく理解して使いこなせるようになるには、ある程度の学習と実践経験が必要です。

本当の意味で使いこなせるようになるまでの期間は、この「仕様を正しく理解できていないがために上手くいかない」という状況にぶつかりがちです。

そうしたとき、原因を正しく特定する目的として以下の記事でもご紹介している検証ツールでの確認方法は最低限理解しておくことをオススメします。

あわせて読みたい

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】 今回は Google chromeの検証ツールを使用してCSSの反映状況を確認する方法+CSSが反映されていないときの対処方法 について解説をします。 なお、CSSが反映されない原因…

原因５｜他のCSSに上書きされている（☆）

前項と同様、初心者の方がハマりやすい原因のひとつに、他のCSSで上書きをしてしまっているというものがあります。

これはCSSの優先度に関わってくる内容で、この記事では詳しくは触れませんが、Googleの検証ツールを利用した確認方法を通じて「上書きをしてしまっていないかどうか」を確認することが可能です。

まとめ

以上、CSSが反映されない５つの原因とその対処方法についてお伝えしてきました。

CSSが反映されない原因は様々で、状況によって対処方法は変わります。

本記事を読んで何が原因でCSSが読み込まれていなかったのか、またその対処方法が明確になったなら嬉しいです。

また、Google chromeの検証ツールを使用することでCSSが反映されない原因をより探りやすくなります。

使い方が分からないという方は以下の記事も併せてご覧いただくことで、今後のCSSコーディングで沼にハマることを避けやすくなるかと思います。

ケケンタ

ここまでお読みいただきありがとうございました！
またどこかの記事でお会いしましょう！

あわせて読みたい

【HTML】CSSを読み込む「３つ」の方法を紹介！方法別メリット・デメリット この記事ではHTMLへのCSS読み込み方法を「３つ」解説していきます！  この記事でわかること CSSファイルをHTMLファイルに読み込む方法（＝外部ファイル読み込み） CSSを…

あわせて読みたい

【HTML】パスとは？CSSが反映されない原因｜相対パスと絶対パス【初心者】 CSSが上手く反映されない…… とお困りの方へに向けて、この記事ではCSS読み込みの基本となるパスについて詳しく解説していきます。   この記事で分かること パスとは何か…

あわせて読みたい

検証ツールでCSSの反映状況を確認して対処する方法【デベロッパーツール】 今回は Google chromeの検証ツールを使用してCSSの反映状況を確認する方法+CSSが反映されていないときの対処方法 について解説をします。 なお、CSSが反映されない原因…

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...

ケケンタ

CSSが上手く反映されない……

とお困りの方へに向けて、この記事ではCSS読み込みの基本となるパスについて詳しく解説していきます。

HTMLの勉強を始めたばかりの頃は、いったい何が原因でCSSが反映されないのかがすぐにわからなかったりして、上手くコーディングを進められない！ということが起こりがちです。

今回はその中でも、パスの書き方を間違えているが為にCSSファイルがそもそも読み込めていない、という方に向けて

ケケンタ

パスってなに……？

をお伝えする記事を作成しました。

この記事へたどり着くまでの間に、ブラウザのページ更新やキャッシュの削除など思いつく限りを試したけれどもやっぱりCSSが反映されないという方にとっての助けになれば幸いです。

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

CSSが反映されない原因　～パスの記述ミスとは～

CSSが上手く反映されない原因は

など様々です。

ちなみにCSSの指定方法は３パターンあります。

あわせて読みたい

【HTML】CSSを読み込む「３つ」の方法を紹介！方法別メリット・デメリット この記事ではHTMLへのCSS読み込み方法を「３つ」解説していきます！  この記事でわかること CSSファイルをHTMLファイルに読み込む方法（＝外部ファイル読み込み） CSSを…

ケケンタ

その中でも特に初学者の方が引っかかりやすいのが「パスの記述ミス」です。

パスの記述ミスというのは、端的に言うと

パソコン側にCSSファイルの「置いてある場所」を正しく伝えられていない

ということです。

例えば、下記のimgタグがあったとします。

<img src="img/kekenta/dog-icon.jpg">

これは「imgフォルダの中にあるkekentaフォルダの中にあるdog-icon.jpgを表示してほしい」とコンピュータにお願いをしています。

しかし、実際にdog-icon.jpgが「kekentaフォルダ」ではなく、imgフォルダ内にそのまま置かれていたらどうでしょう。

この場合、伝えた場所と、実際にファイルが置いてある場所が異なるため

ケケンタ

あれ？　kekentaフォルダにdog-icon.jpgが無いよ？

という状況になるわけです。

さらに、パソコンは自分が「どのように困っているのかをユーザに伝えること」が基本的にできません。

そのため、「ファイルを見に行ったけど無かったから何もしない」という結果に終わります。

これが、「パスの記述ミス」によってCSSが反映されない状況です。

ケケンタ

CSSファイルまでのパスの書き方がわかっているかどうかで、ここの対処のしやすさも変わってきます。

パスとは？

改めて、そもそも「パス」とはなんでしょう？

パスとは、いうなればファイルの住所です。

先ほどの例では、「dog-icon,jpgファイルの置き場所」がパスにあたります。

人の場合、初めてどこかのお店に行くときには必ず住所を調べ、それを元に道を進んで行くと思います。

「パス」とはまさに住所の役割を持つもので、住所が人のためにあるとすると、パスはコンピュータのために存在する「位置情報」です。

パスはコンピュータのために存在する「位置情報」のこと

先ほどご紹介したimgタグの例を再度ご説明します。

<img src="img/kekenta/kekenta-dog.jpg">

このsrcに記述されているのが「パス」です。

意味は「imgフォルダ内のkekentaフォルダ内のkekenta-dog.jpg」です。

このように記述をすることで、コンピュータに「imgフォルダ内のkekentaフォルダ内のkekenta-dog.jpgを持ってきて」と伝えているわけです。

パスには「相対パス」と「絶対パス」がある

ここでさらにパスについて踏み込んでご説明致します。

コンピュータのための「住所＝パス」は、正確に言うとさらに2つに分けられます。

ケケンタ

まずは絶対パスから見ていきましょう。

絶対パス

絶対パスとは言うなれば「住所」です。

あなたが住んでいるお家には当然、下記のような「住所（絶対パス）」があります。

日本○○県○○市○○町●-●-●

一方、コンピュータ上では

すべてのファイルに対して同様に住所が割り当てられています。

この割り当てられている住所が「絶対パス」です。

絶対パスには、下記のようにザックリ２つの表記パターンがあります。

どこかで見覚えのある方もいらっしゃるかと思います。

見た目はまったく異なりますが、いずれも「絶対パス」です。

具体的には

前者はローカル（＝使用しているパソコン）における絶対パス
後者はインターネット上における絶対パス

です。

ケケンタ

もう少し具体的にご説明をします。

この「絶対パス（住所）」は、世界中のどこにいるどんな人が見ても、必ずひとつの場所を指し示すものです。

コンピュータ寄りに言い換えると、どんなファイル（コンピュータ）から見ても必ず同じ場所を指し示すのが絶対パスです。

……と、いうのが説明とはなりますが、恐らく多くの方は、後述する「相対パス」の説明をご覧いただくことでようやく正確な理解に繋がる内容かと思います。

そのため、ピンと来ていないという方は、まずは「ふーん」程度にお読み頂ければと思います。

絶対パスとは、どんなファイル（コンピュータ）から見ても必ず同じ場所を指し示すもの

相対パス

相対パスとは、現在いる場所をスタート地点とした場合、目的地がどこにあるのかを示すものです。

人の世界では、恐らく相対パスに該当する正式な表記はなく、あるとするならば道を尋ねられた時に「１個先の信号を右に曲がって手前から３つ目の建物です」というような言い方が相対パスに該当します。

これがつまり、「現在いる場所をスタート地点とした場合、目的地がどこにあるのか」ということです。

相対とは、ある基準から見てどのように違うのかという比較的な表現ですが、相対パスとは「現在いる地点を基準とし、どこを辿っていくことのか」を表すものです。

ここで、先ほどお見せしたimgタグの例を再掲します。

<img src="img/kekenta/dog-icon.jpg">

このsrcの中身は、実は相対パスです。これが例えばindex.html内に記述されているとすると、index.htmlを基準点とした場合のパスが

img/kekenta/dog-icon.jpg

です。

これを改めて翻訳すると、「index.htmlが存在するフォルダ内にあるimgフォルダ、その中にあるkekentaフォルダの中にあるdog-icon.jpg」となります。

重要なのは、ファイル同士の位置関係を正確に理解し、記述することです。

この位置関係を表現する相対パスを書き間違える＝パスの記述ミス

とお考え下さい。

相対パスのことをよく知らなかったという方は、ファイル同士の位置関係と言われてもイマイチぴんと来ないかもしれません。

考え方のコツとしては、

パスを記述するファイル＝基準点

として、「基準点からどのようにフォルダをクリック、あるいはひとつ前に戻ったりすることで、目的のファイルが存在するフォルダまでたどり着けるのか」を実際にパソコンを操作して場所を確認することです。

そうすることでファイル同士の位置関係を正しく確認することが出来るため、あとはそれをパスとして表現するという流れになります。

補足　～パスの意味・記述方法を理解する意味～

実は、Vitual Studio Codeのようなエディタツールにはパスを予測表示してくれる機能が備わっていることもあります。

しかし、パスは今後プログラミングに取り組んでいく上で一生付きまとってくる要素のひとつなので、ここを分かっていないとプログラミングが滞る原因となってしまいます。

そのため

エディタの補助機能を使用すれば確かに簡単に書くことはできるけど、きちんと理解することが非常に大切

と、個人的には考えています。

「./」や「../」の正体

HTMLの勉強を進め、あれこれ調べものをしているときに「./」や「../」といった表記を見かけたことはないでしょうか？

パスを正しく記述する上でこの２つの表記をきちんと理解することは不可欠なため、ここで併せてご説明させて頂きます。

結論から言うと

./

現在のフォルダ（＝カレントディレクトリ）

../

ひとつ上のフォルダ

をそれぞれ示しています。

カレントディレクトリという言葉はあまり聞きなじみがないと思いますが、IT界隈ではよく使用する表現なので、別のサイトで調べものをする際の補助の意味で敢えて紹介させて頂いています。

カレント＝現在の
ディレクトリ＝フォルダ

という意味です。この記事ではこのあとも「フォルダ」と記載をしていますが、今後のプログラミング学習を進める上で是非ディレクトリという呼び方に慣れ親しんで頂ければと思っております。

./とは

まずは「./」の意味から。
以下の２つはまったく同じ意味です。

※２つ目はsrcの中のimgの手前に「./」が付いていることに注目して下さい。

<img src="img/kekenta/dog-icon.jpg">

<img src="./img/kekenta/dog-icon.jpg">

「./」とは現在のフォルダのこと。

つまり、

./img/ ＝ 現在のフォルダ内にあるimgフォルダ

という意味になります。

言ってしまえば、この記号は省略が可能ということです。

記述するメリットとすると「現在のフォルダ（カレントディレクトリ）」を明示的に表すことができるため、読む人によって可読性が高まるというところでしょうか。

慣れてしまえばどちらの表記でもパッと見て意味がわかるようになるため、個人的には基本は省略で良いかなと思っています。

ただ、「./」を使用しているコードも存在するため、意味をしっかり理解しておくことが大切です。

../とは

「../」は、現在いるフォルダの、そのひとつ上のフォルダを表します。

例えば、

<img src="../kekenta/dog-icon.jpg">

というパスの指定があった場合、これは「現在いるフォルダのひとつ上の階層――そこにあるkekentaフォルダの中にあるdog-icon.jpg」を示します。

パッとイメージがしづらいかもしれませんが、「ひとつ上のフォルダを記述するときは『../』って書くんだな」と思って頂ければ問題ありません。

何度か使用していく内に本質的な理解が深まっていくと思います。

相対パスと絶対パスの違い

一通りパスの説明をお伝えしたところで相対パスと絶対パスの違いを改めて整理したいと思います。

絶対パス（ファイルの住所）

世界中のどこにいるどんな人が見ても、必ずひとつの場所を指し示すもの
これをコンピュータ寄りに言い換えると「どんなファイル（コンピュータ）から見ても必ず同じ場所を指し示す」もの

相対パス

現在いるファイル・フォルダを基準点とし、目的のファイル・フォルダまでの道筋を示したもの

相対パスの説明を読むまでは絶対パスの説明がピンと来なかった方も、また違った形で意味を捉えられているのではないでしょうか。

パソコン世界独自の考え方でもあり、始めの内はパスについて中々イメージが湧かないかもしれません。

しかし、この先プログラミングの学習を継続していく中でパスは必ず登場してくる要素のひとつです。よって、気が付けばパスの記述に困ることも次第に無くなるかと思います。

ケケンタ

絶対パスは住所、相対パスは現在位置からの道案内、で覚えるとイメージしやすいかもしれません。

パスのまとめ

いかがだったでしょうか？

この記事はCSSの読み込みがどうしても上手く行かないという方の中で、さらにパスの記述ミスが疑われる方のお役に立ちたいという気持ちから執筆を致しました。

パスに関する正しい知識・理解が得られれば、今後パスの記述ミスによって時間や精神を消耗することもほとんど無くなるかと思います。

この記事で少しでもパスの理解の後押しとなったならば幸いです。

このブログでは今後もプログラミングを独学で学んでいる方の手助けになる記事を発信していきます。

またどこかの記事でお会いできれば光栄です。それでは良きITライフを。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...