初心者の為のWEB開発

読み込まない!cssが読み込み・反映されない原因と解決法を紹介

※当サイトはPR(プロモーション)を含みます。

WordPress CSSが読み込まれない?原因と解決方法 初心者の為のWEB開発
ファズ
ファズ

Hello!ファズです

htmlの勉強をしているけど、cssが読み込まれない!原因がわからないんだけど、どういったことが原因になる可能性があるんだろう?

今回はWEB制を勉強している方向けに、基本であるcssの「読み込まれない原因」や「反映されない理由」などについてまとめていきたいと思います。

htmlやcssを勉強していると誰でも1度は経験しますが、最初は原因がわからず躓いたり、結局原因を突き止めることができずに挫折してしまう方もいます。

そう、初心者の鬼門の1つと言ってもいいかもしれない・・・。

ぼくも何度躓いて大コケしたことか(笑)

結論!

結論

cssが反映されない多くの原因は、

  • ファイルパスが違う
  • 読み込む優先度が負けている
  • cssの記述ミス
  • cssバージョンの互換性がない
  • WordPressの場合「追加css」が記述されている
  • 古いキャッシュが残っている

というものがあります!

初心者の場合、複雑な構成やSassなんかも使っていることはないと思うので、基本的には上記6つが原因になっている可能性が非常に高い。

本記事ではそれぞれ「原因の理由」や「解決方法」を紹介していくので、今困っている方、事前に原因を知って壁にぶつかった時に対応できるよう知識をストックしたい方などには是非参考にしてみてほしいです。

ファズ

Hello!ファズです。

◆仕事関連 WEB制作4年:「WordPress/WEB制作」
◆インドア趣味:アニメ好き歴10年/ガンプラ購入数十種以上!
◆生活品:ソイプロテイン常用2年、試した数十数種

↑インドア多趣味の実際に試した内容の記事を紹介していきます。

※当サイトはリンクフリーですが「出展元」として記載をお願いします!

ファズをフォローする
wordpressのおすすめテーマ
WordPressのテーマ選びでお悩みの方必見!

【初心者におすすめの記事】

◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい

cssが読み込まれない原因一覧

先述した通り原因の一覧は下記の可能性が非常に高い。

  • ファイルパスが違う
  • 読み込む優先度が負けている
  • cssの記述ミス
  • cssバージョンの互換性がない
  • WordPressの場合「追加css」が記述されている
  • 古いキャッシュが残っている

いずれも簡単に確認できるので順にチェックしていけば必ず原因がわかるはず!

そして解決していく経験を何度か繰り返すことで「この場合はどの辺に原因がありそうだな」とパッとわかるようになります!

下記ではそれぞれの原因の詳細と解決方法を紹介していきます。

①【ファイルパスが違う】

ケース原因:cssファイルのリンクパスが間違っている

cssを反映させるには

  • html内にstyleタグで直接書き込む
  • 外部ファイルとしてcssファイルを作ってhtmlに読み込ませる

という2つが基本的な読み込み方法なんですが、②の方法でファイルを準備して読み込まれない場合「cssファイルのパスが間違っている」可能性があります!

この場合の原因は

  • 絶対パスが間違っている
  • 相対パスが間違っている
  • 指定してあるファイル名が間違っている

上記が考えられます。

それぞれを下記で解説。

①絶対パスが間違っている

絶対パスとは、ドメインからファイルまでの指定パスを正確に記述して読み込む方法で、フルパスとも呼ばれます。

例えば「A→B→C→D」の階層があるとし、Dの階層にcssファイルがある場合「A→D」のように間の階層を簡略化することができません。

【絶対パス例】
index.html/css/style.css ←◎
index.html/style.css ←×

絶対パスの場合、簡略化して書いてしまうとゴール(cssファイルの在処)に到達することができずリンクが切れてしまいます。

絶対パスは1文字でも間違えると使えないので、正確な入力が必要!

解決方法

改善するのは簡単!

間違っている場合、ちょんとしたディレクトリを指定してあげるだけでファイルへアクセスすることができます。

階層を1つずつ確認し、正しいかどうか確認してみてください。

②相対パスが間違っている

相対パスは絶対パスと違い、全てのディレクトリを記述しなくてもファイルにアクセスすることができます。

下記は「index.html/css/style.css」で「style.css」ファイルにアクセスする場合の相対パス例。

【相対パス例】
css/style.css

パスは記述も短く、読み込み処理も早くなるので使うメリットはありますが、1つ上の階層に移動する際「../」などの指定が必要となり複雑化する可能性もあります。

「階層管理ができない」、あるいは「相対パスを理解していない」場合は使用するのを見送った方が良いと思います。

解決方法

上記で述べている通り、相対パスを理解せずに使用している場合htmlファイルを移動させたりして位置関係が変化している可能性があります。

今一度、相対パスについて学習するか、絶対パスに指定し直すことをおすすめします!

指定してあるファイル名が間違っている

絶対パスや相対パスの指定はもちろんなんですが、そもそも指定している

  • cssの名前が違う
  • 拡張子が違う
  • 指定ファイルが違う

などの可能性があります。

解決方法

htmlファイルのファイル名が一致しているか、ファイル名は間違っていないか確認してみてください。

また、WordPressを使っている場合「親」、あるいは「子テーマ」のパスをうまく取得できていない可能性もあります。スタイルシートまでのパスを取得する「テンプレートタグ」の使用を検討してみるのをおすすめ!

【子テーマのcssファイルを読み込む記述例】

<?php echo get_stylesheet_directory_uri(); ?>/css/style.css

php部分(テンプレートタグ)で子テーマまでのパスを取得し、残りの部分を絶対パスで指定した組合せ方法。

上記は1例なので、より詳しく知りたい方は検索してみてね!

②【読み込む優先度が負けている】

原因:読み込む優先度が負けている

cssはセレクタを指定するとその要素にスタイルをあてることができます。

しかし、複数回同じ要素にcssをあてることもできてしまい、基本的に上から順番に読み込まれ、下に書くほど優先度が変わっていきます。

また、セレクタの指定方法でもこの「優先度」が変わるので、後から指定した要素にcssが反映されず「cssが読み込まない」と勘違いする方もいそう。

実際は、

  • cssを記述の上から順に読み込む
  • 新たにcssを記述する
  • 先に書かれたコードに記述の仕方で優先度が負けてしまう
  • 結果反映されない
  • 結論:読み込まれてはいるが、反映されていない

こんな流れになっています!

そして、セレクタ指定で優先度が高い順の書き方は下記

  • インラインスタイル
  • idセレクタ
  • classセレクタ
  • 要素セレクタ
  • !important

それぞれサラッと解説していきます。

インラインスタイルとは

インラインスタイルはhtmlタグの中に「style」で直に記述される書き方。

外部ファイルとはことなり、直接記述されるので優先度が1番高いですが、記述後の管理や書き方が面倒なこと、可読性の悪さからあまり利用しない方がいいです。

利用ケースとしてはjsで要素を操作した時に動的にクラスを付与するなどがあります。(忘れてもOK)

【記述例】

<div style="font-size:12px;color: #000;">インラインスタイルで記述</div> 

↑ご覧の通り、cssを「;(セミコロン)」で区切って記述していくので、増えれば増えるほど境界がわからなくなり可読性を失っていきます。

idセレクタとは

id(アイディー)」は固有の要素につけるマークアップで、基本的にレイアウトや装飾で利用はしません。jsなどを使って操作、あるいはアイデンティティを与えたい場合に使用します。

そのidはページ上に1つしか存在できないので、クラスのように多用するのも厳禁。

もしかすると同じidを2つ以上使って、片方が読み込まれなくなっている可能性もありますね!

【html記述例】

<div id="test-id">アイデンティティーのある要素に使う</div> 

【css記述例】

  #test-id {
    color: #000;
  }

cssではidを記述する際「#」と表現します!

指定の時に頻繁に使う「.(クラス)」と間違えていないか、ちゃんと「#」を記述しているかチェック!

classセレクタとは

class(クラス)」は一般的にレイアウトや装飾などに使用されるもので、要素を操作する際にも使用されます。

特徴として同じクラス名を指定した要素に一括でcssを適用できるところ。

例えば、任意の箇所をまとめて色を変更したり、非表示にさせたりなどですね。

【html記述例】

<div class="test-class">グループ化する要素や、レイアウトを設定する時に使用する</div> 

【css記述例】

  .test-class {
    color: #000;
  }

「test-class」のクラスが付けられた要素は全て文字色が黒に変わります。

cssでは「.」を前に付けるルールなので、反映されない場合抜けているかなどをチェック!

要素セレクタとは

要素セレクタは指定したhtmlタグの名前のまま指定する方法。

主にcssを初期化(打ち消す)するリセットcssなど、ベースのcss設定の際に使用されます。

例えば、サイト全体の基本設計の中に「テキストサイズ」や「行間」・「文字色」などが未設定としたとき、bodyタグを指定することで全てのテキストに対して、基準を設定することができます。

【html記述例】

<body>
  <div>
    <p>テストテキストです</p>
    <p>テストテキストです</p>
    <p>テストテキストです</p>
    <p>テストテキストです</p>
  </div>
</body>

【css記述例】

  body {
    font-size: 16px;
    line-height: 1.5;
    color: #3c3c3c;
  }

↑bodyタグに設定したことで、基準の設定としてすべてのテキストに対し上記のスタイルを適用させ、ここから装飾や見出しなどのサイズでメリハリをつけて整えていく流れ。

基本的に優先度は高くなく、設計初期に使用することが多いので順にcssを書いていくとクラスなどに打ち消され一部適用されない部分が必然的にでてきます。

ただし、要素セレクタとクラスセレクタを合わせて使用する方法もあり、下記のセレクタの書き方の場合優先度を上げることができます。

【要素セレクタ+クラス】

 body.home{
    font-size: 16px;
    line-height: 1.5;
    color: #3c3c3c;
  }

*セレクタとは

要素全体に指定することができるセレクタで、こちらも要素セレクタのようにリセットcssなど初期設定を書く場合に使用されます。

指定レベルとしては一番弱いので、レイアウトや装飾などを指定していく際には基本的には使用しませんね。

ネット上で配布されているリセットcssなんかによく使われているので、詳しく見てみたい方はググってファイルをダウンロードしてみてください。

【css記述例】

 * {
    font-size: 16px;
    line-height: 1.5;
    color: #3c3c3c;
  }

このcssが効かない場合、初期設定以外で使用してしまっているため上書き(オーバーライド)されている可能性が高いです。

そもそも見た目の変更などレイアウトの指定時には使用しないセレクタなので、設定方法を見直してください。

!importantとは

優先度の高い順番にセレクタについて記述してきましたが、他にも「結合子」や「属性」指定などもあります。

ちょっとややこしい指定なので、初心者さんが見る体として今回は割愛しますが、最後に1つだけ紹介。

上記で紹介したセレクタの順番だと1番優先度が高いのは「id(アイディー)」だというのがわかると思いますが、セレクタの優先度を全て無視した「!important」と呼ばれる「プロパティ」に付与できる値があります。

結論からいうと、「基本的には使わない」のが好ましい値なので可能な限り使わない・・・もし、使う場合「もうほんとにマジでここだけ使いたい!!!」と言う所だけに限定して使用してください。

「!important」は強力で、手軽に使えるんですが、サイトの管理やcssの設計をやっていくと、設定後不要になってくるケースも多い。

そんな時!importantだらけのcss設計になっていた場合、マジでどこで何が適用されているのか非常に面倒になることが予想できます。

ブロガーさんでむやみに紹介している方も散見されますが、制作現場では基本的に選択肢に入れることはほぼありません。

下記は「!important」を使った記述例。
通常、idを指定した後に要素セレクタの「p」を指定しても、優先度で負けているので反映されることはありません。

【html記述例】

<div id="test-id">アイディーを指定</div> 

【!important記述前】

 #test-id {
    font-size: 16px;
    line-height: 1.5;
    color: #3c3c3c;
  }
 div {
    font-size: 16px;
  }

これを「p」のプロパティ、font-sizeに!importantを付与した場合がこちら↓

【!important記述後】

 #test-id {
    font-size: 16px;
    line-height: 1.5;
    color: #3c3c3c;
  }
 div {
    font-size: 12px!important;
  }

上記divのフォントサイズプロパティの値に!importantが付与された場合、idに書かれたフォントサイズは無視され。divの!importantが優先されます。

↓画像はchromeのデベロッパーツールでも上書きされるか検証してみた様子。

セレクタ「.bold」で指定されているプロパティにfont-sizeを2つ指定しましたが、!importantのプロパティが優先されていることがわかりますね!

通常上から順番に処理されるので、同一プロパティが2つ並んで記述されると、下の方が最新となり上書きして反映されますが、ご覧の通り。

③【cssの記述ミス】

原因:cssの記述ミス

反映されない原因3つ目はcss記述のミス!

cssはプログラミング言語ほど厳密ではないのである程度ミスっても反映されてしまうことがありますが、特定の箇所を間違えると全く反映されません。

【ミスると全く反映されない箇所】

  • セレクタ名の記述ミス
  • プロパティと値のミス
  • 「:」と「;」のミス

セレクタ名の記述ミス

「.class」の「.」が抜けていたり、そもそも指定要素のアルファベットが間違っていたりすると反映されません。

特に初心者さんは「.」や「#」の抜けや相互間違いが結構多いのでまず最初にチェックしてみるのをおすすめ!

【解決方法】

  • 目視orデベロッパーツールによるチェックを行う

プロパティと値のミス

cssのそもそも「プロパティ(font-sizeなど)」や「値(16pxなど)」が間違っている。

cssは鈍感で、プロパティが何行あろうと、上記1行の中でスペルがミスっているだけでは全体に反映されないということにはなりません。

しかし、記述のミスっている1行に関しては反映されないので、ブラウザのデベロッパーツールなどを使ってチェックしてみるといいでしょう!

↑このようにわかりやすく間違えてるよーって教えてくれます。

【解決方法】

  • 目視orデベロッパーツールによるチェックを行う

「:」と「;」のミス

「:(コロン)」と「;(セミコロン)」の間違い!

これはぼくもキーボードの関係でいまだにやってしまうミスの1つ。それぞれの位置が逆転していたり、「;」がなく下に書いたプロパティと混ざってしまっていたり。

このミスの仕方によっては、ミスった箇所から下に書いたすべてのcssを反映させないといった要因に繋がるので注意が必要。

逆にどうなるか知っていれば、反映されない箇所が多い時点で「:」と「;」のミスと原因をしぼることもできます。

【解決方法】

  • 目視orデベロッパーツールによるチェックを行う

④【cssバージョンの互換性がない

原因:cssバージョンの互換性がない

htmlやcssはバージョンアップを重ねており、その過程でテスト段階のプロパティを仮リリースすることがあります。

しかし、そのプロパティ全てが正式採用されるとは限らず、中には多数の使われなくなったプロパティが存在しています。

こういった情報をいち早く入手し、公開しているサイトの中には、使われなくなったプロパティをずっと掲載し続けているサイトも多数。

これをコピペして使ってしますと、「反映されない」・「挙動がおかしい」などに繋がることがあります。

ぼくが遭遇したものだと、「flex」が正式採用される前のコードを使ってしまい、全動作しなかったということがありました。調べてみると、廃止されたコードでしたね。

最近だと、HTML5が廃止され「HTML Living Standard」へ移行。それに伴いbody内への<style>の直書きが仕様としてダメになったことなども含め、cssが読み込まれない原因に繋がる可能性はありますね。

【解決方法】

  • 互換性の確認をする

⑤【WordPressの場合「追加css」が記述されている】

原因:外部ファイルのcssを触っていて変更されない場合、WordPressだと「追加css」に記述がある可能性

WordPress独自の機能で、専用cssをフィールドに保存しています。

これが原因になることもありますし、初心者さんだと先述した「!imprtant」の記述を追加cssに書き込んでしまっている可能性も考えられますね。

追加cssはWordPressのダッシュボードから「外観 > カスタマイズ > 追加css」でも記述・確認できますが、テーマによってはページ内のみに反映させるフィールドが設けられていることもあります。

読み込まれない、あるいは反映されない場合確認に使っているページに特有の記述がないか要チェック!

↓画像はCocoonにあるページ特有の記述場所例。

【解決方法】

  • WordPressの「追加css」を確認する
  • 特定ページにのみ指定されているcssがないか確認する

WordPressの追加cssが反映されない?効かない時の解決方法

⑥【古いキャッシュが残っている】

原因:ブラウザやサーバーキャッシュの影響

「cssが読み込まれない!」・「反映されない」と言う方はまず真っ先にこれを疑ってください!ブラウザやサーバーにキャッシュが残っている可能性。

何度もcssを変更・更新しているとブラウザキャッシュが蓄積され、上手く反映されないことがあります。頻度としても割と多く、ぼくの体感だとsafariは特に多い。

また、ブラウザのキャッシュを削除しても読み込まれない場合はサーバー側のキャッシュが影響している可能性があります。特にWordPressを使っている方は可能性が割と高め。

キャッシュについては下記記事でまとめているので参考にご覧ください。

WEB必須知識!キャッシュのクリアやスーパーリロードのショートカット紹介

cssが読み込み・反映されない原因と解決法

以上、「cssが読み込まれない」・「反映されない」原因と解決方法を紹介してきました!

総括すると、基本的に初心者さんに多いのはcssの記述ミスが圧倒的に多いです!!というのも、コピペで使用している方も多いからかも。

コピー元がそもそもおかしい場合や、行数(数字)を一緒にコピーして編集する段階で失敗している方も見受けられました。

cssを触るなら、少し時間をとって書き方くらいは覚えた方がいいかなと個人的には思います。全てのルールを覚えずとも、書き方を覚えるだけで反映されない1番の原因を目視で見つけることができるので!

これからサイトの運用やデザインをちょっと変更してみたいなど考えている方へ。cssはハードルも高くないので少し触ってみるのをおすすめします!

コピペは良いんだけど、テキトーなのもたまにあるんですよね・・・・。

ファズ
ファズ

今回はここまで!

ありがとうございました~

コメント

タイトルとURLをコピーしました