CSSが効かない!?確認すべきポイント3つを解説!

 

HTMLを学習し始めた方は、CSSにも挑戦されているかと思います。

文字の色や大きさを変えたり、レイアウトを変えたりと

いろんなことが操作できる感覚に楽しさを感じる方もいらっしゃると思います。

ですが、調べた内容で書いているはずなのに、

「なぜかCSSがうまく効かない!」と、困ってしまうことがありませんか?

 

そこで今回はCSSが効かない場合について、

・よくある原因と確認すべきポイント3つ

をご紹介します。

・コピペも試したのにうまく反映されない!
・CSSが一部しか反映されない!

とお困りの方は、ぜひ参考にしてみてください。

 

CSSが効かないよくある原因

 

書き方ルールの間違い

正しいルールで記述ができていないと上手く反映されません。

よくある書き間違いについて見ていきましょう!

 

コメントアウトが間違っている

CSSでコメントアウトするには「//」の記号を使います。

ここでのよくある間違いとしては

・HTMLのコメントアウトの「<!–  –>」記号を使っていないか

・囲みはじめを忘れている(「/*」の記号忘れ)

・閉じるのを忘れている(「*/」の記号忘れ)

といったことが考えられますので、再度チェックしてみましょう。

 

「;(セミコロン)」が抜けている

 

「{}」が間違っている

 

文法が間違っている

スペル間違い(タイポ)

※スペルミスのことを「タイポ」と呼ぶことが多いです。

(「誤植」を意味する「typographical error」から来ているそうです)

 

 

優先順位が低くなっている

優先順位とは?

CSSの記述が少しずつ複雑になっていくと、1つの要素に対して

複数のセレクタ、プロパティを記載してしまうことがあります。

その場合、「どちらを優先するのか」のルールが明確に決められているのです。

優先順位について

非常に複雑な計算で決まるのですが、最初はひとまず3つのルールを覚えればOKです。

  1. 「最後に書いたもの」が優先される
  2. 「要素型セレクタ」「classセレクタ 」<「idセレクタ」 の順に優先される
  3. 「!important」が最優先される
「最後に書いたもの」が優先される

 

「要素型セレクタ」「classセレクタ 」<「idセレクタ」 の順に優先される

さきほどの「最後に書いたもの」よりも、こちらのルールが優先されます。

※他にも「擬似要素」「擬似クラス」といったものもあり、計算式はさらに複雑になりますが、学習初期段階では、冒頭でお伝えしたように、「要素型セレクタ」<「classセレクタ 」<「idセレクタ」を覚えておいて、後は徐々に知識をつけていければOKです。

 

「!important」が最優先される

※「!important」は便利ではありますが、多用すると保守性が悪くなるため、極力使用しないことをオススメいたします。

 

キャッシュが残っている

キャッシュとは?

キャッシュとは「1度開いたWEBページのデータをブラウザに保存しておくことで、次回同じページを開くときに短時間でパッと表示することができる仕組み」のことです。

非常に便利な機能ではありますが、CSSを編集しても反映されない場合は、

ブラウザがこのキャッシュ(編集前のデータ)を表示している可能性があります。

 

キャッシュをクリアする方法(Google Chromeの場合)

ここでは2つの方法をご紹介します。

ショートカットキーでのスーパーリロード
ブラウザの「設定」からキャッシュをクリアする
  1. Google Chromeの右上のアイコン(家の形)を選択。
  2. 出てきた選択項目の中から「設定」を選択。
  3. 設定画面が別タブででてくるので、その中から「プライバシーとセキュリティ」を探す
  4. 「閲覧履歴データの削除」を選択。
  5. 「キャッシュされた画像とファイル」にチェックが入った状態で「データを削除」を選択(他のチェック項目は任意で選択ください)

 

※2020/6/26時点での方法です。バージョンアップにより手順は変更される可能性があります。

 

まとめ

以上、CSSが効かない場合のポイントとして

・よくある原因と確認すべきポイント3つ

をご紹介しました。

 

うまく効かない場合、必ずどこかに原因があります。

プログラミング学習を始めたばかりでCSSでお困りの方は、ぜひ参考にしてみてください。