本記事では、CSSが反映されない時に考えられる5つの原因とその対処法について解説しています。
HTML/CSSの学習におすすめ書籍
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
メリット
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
rel=”stylesheet”を忘れている
別ファイルで記述しているCSSをHTML側で読み込むには、<head>タグ内に以下のコードを記述します。
<link rel="stylesheet" href="CSSファイルの名前" />始めの頃は「rel=”stylesheet”」が抜けていることがよくあるので、正しく記述されているか確認しましょう。
ファイルを指定する属性をsrcにしている
CSSでは、ファイルを指定する属性は「href」です。しかし、JavaScriptではファイルを指定する属性が「src」のため間違えて属性を指定している場合があります。
<!-- ▼CSS -->
<link rel="stylesheet" href="CSSファイルの名前" />
<!-- ▼JavaScript-->
<script src="JavaScriptファイルの名前"></script>ファイル名・パスを間違えている
ファイル名(拡張子の付け忘れ)・パスを間違えて記述するのはよくある間違いです。CSSファイルの配置を移動してパスをそのままにしている可能性もあるので確認しましょう。
ファイルをサーバーにアップしていない
ローカル環境(自分の端末)では、CSSが反映されているのに本番環境にアップしたらCSSが反映されていない場合は、CSSファイルをアップし忘れている可能性が高いです。サーバーの中を確認してCSSがアップロードされているか確認しましょう。
キャッシュが抜けていない
今まで解説した方法でも、CSSが反映されない場合はキャッシュが抜けていない可能性が高いです。キャッシュの抜き方が分からない方は、こちらのGoogleアカウントヘルプをご参考ください。
