自由気まままMENUCLOSEサイトメニューWeb制作フリーランスブログネタプロフィールお問い合わせCLOSESEARCHWeb系フリーランスがWeb制作やガジェット、ブログについて綴っていきますWeb制作フリーランスブログネタプロフィールお問い合わせHOMEWeb制作CSSが反映されない時の原因と対処法CSSが反映されない時の原因と対処法2019年4月28日Web制作ツイートシェアはてブ送るPocketコーディングをやっているときにありがちなトラブルの一つとして、CSSが反映されないというものがあります。CSSが反映されない原因はパターン化されているので、落ち着いて一つ一つ検証すればすぐに解決できます。本記事では検証手順について解説していきます。以下、記事に入ります。まとめCSSが読み込んでいるかどうか確認するまずは大前提として、サイトがCSSを読み込んでいるかどうかを確認しましょう。style.cssというファイルを作成した場合、headの中を見れば「style.css」の記述がどこかにあるはずです。そもそもstyle.cssが反映されているかどうかを見てみましょう。WordPressサイトだと、テンプレートタグの間違いなどで反映されてない可能性があります。/>この辺りの記述はしっかりと確認しましょう。CSSが全体に反映されているか確認するCSSが読み込んでいるのを確認したら、次はCSSが全て反映されているか確認しましょう。h1タグのCSSは反映されているのにh2タグは反映されていない...この場合、h2タグの記述が間違えていたり、前後のCSSの閉じタグが抜けているなどの原因が考えられます。検証ツールを用いて、要素のCSSを確認してみましょう。CSSが反映されている場所と反映されていない場所があれば、記述ミスの可能性があります。キャッシュを消してみるstyle.cssが反映されていたら、キャッシュを消してみましょう。キャッシュの消し方については、以下の記事で解説しています。https://kutarosan.com/cache-delete/ここで1つ問題なのが、サーバー側のキャッシュです。エックスサーバーによくありがちなのですが、自分のブラウザ(GoogleChrome等)でキャッシュを削除しても、エックスサーバー側がキャッシュを残している場合があります。この辺りの設定は大体サーバーのマニュアルに記述があります。キャッシュ」で出てくる)ブラウザキャッシュを消しても反映されない場合、サーバーキャッシュを疑ってみましょう。Cache」などのキャッシュ系のプラグインが邪魔をしている場合があります。PCでキャッシュが消えていてもスマホで見ると残っている、という例もありますのでプラグインを使用する際は気をつけましょう。ファイル名を確認するCSSが全て反映されてない時などは、ファイル名を確認してみましょう。ありがちなのが、「style.css」がstyke.cssやstyles.cssになっている、などです。初歩的ですが、間違うと割と見逃しがちな部分なので気をつけましょう。パスを確認するファイル名の次は、パスを確認しましょう。href="style.css">と書いてしまうなどがあります。WordPressサイトだと、functions.phpに書いたパスの記述が間違っていることがよくあります。前項の「CSSが読み込んでいるかどうかを確認する」と合わせて、しっかり確認しておきましょう。CSSの記述を確認する上記問題点を見直したあとは、CSSの記述内容に問題がないか確認しましょう。・クラス名を間違っている・クラス名の前のドットが抜けてる・タグ名(h2やp等)の前にドットをつけてるなどです。CSS全体ではなく、ピンポイントで反映されていない時はこちらの原因を疑いましょう。){}←こいつが抜けてるまとめCSSが反映されない原因、心当たりのあるものもあったのではないでしょうか。CSS全体が反映されていない、など大きな問題ほど原因は小さなものです。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。