【CSS】コーディングでCSSが反映されない時に試すべきことをランキング形式でご紹介！

本記事の目次

はじめに
CSSが反映されないときに試すべきことまとめ
CSSが反映されない問題を事前に防ぐ方法

はじめに

CSSを使ってWEBサイトのコーディングをしていると、CSSが反映されず思った通り表示されないということは少なくありません。

また、CSSはブラウザで確認してもエラーが出ることはなく、何が間違っているのか・どこの記述が間違っているのかが判断しづらく、エラーの解消に多くの時間を費やしてしまいます。

そのため、特に初心者にはCSSのエラー解決がコーディングにおける大きな壁となっています。

そこで今回は、私自身のコーディング経験から学んだ「CSSが反映されない時に試すべきこと」をランキング形式でご紹介し、CSSが反映されない問題を事前に防ぐための方法についてもご紹介します。

CSSが反映されないときに試すべきことまとめ

①キャッシュを削除する

CSSが反映されない時にまず試すべきことが、キャッシュを削除することです。

キャッシュとは、データを一時的に保存しておくことを指し、保存したデータを次の機会に利用することで処理速度を上げることができます。

CSSではこのキャッシュが利用されており、以前に開いたことのあるWEBページのCSSをキャッシュしておくことで、2回目以降の表示を高速化することができます。

コーディング時に頻繁にCSSを更新し表示を確認していると、キャッシュのせいで更新前のCSSが適用されてしまい、更新後のCSSが反映されていない表示がされるため、キャッシュを削除する必要が出てきます。

キャッシュを削除する方法にはスーパーリロードというものがあり、以下のキーを同時押しすることでキャッシュを簡単に削除することができます。

Mac → 「Command」 + 「Shift」 + 「R」
Windows → 「Ctrl」 + 「Shift」 + 「R」 or 「Ctrl」 + 「F5」

②HTMLファイルでCSSファイルを読み込む

HTMLファイル内で <style>タグを利用してCSSを記述する方法もありますが、ほとんどの場合はHTMLファイルとは別でCSSファイルを用意し記述します。

CSSファイルはHTMLファイル内の <head>タグ内で読み込む必要があります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <link rel="stylesheet" href="style1.css">
</head>
<body></body>
</html>

コーディングの初めに一度記述してしまえば以降は気にする必要はありませんが、意外と忘れがちではありますので、コーディング初期にCSSが反映されない時は確認してみましょう。

③CSSの記述でスペルミス等がないか確認する

CSSでは、記述ミスをしていても反映されないだけでエラーが出ることはないため、簡単なプロパティ名のスペルミスでも気付くのに時間がかかってしまうケースが少なくありません。

その他、文末のセミコロン「;」を記述していないケースなども、CSSが反映されない原因になるので注意が必要です。

CSSの記述ミスについては、以下のことを特に気をつけてコーディングを行いましょう。

単純なスペルミス
コロン「:」とセミコロン「;」の記述間違いや記述漏れ
波括弧「{ }」の閉じ忘れ
セレクタのクラス指定「.」やid指定「#」の記述漏れ

スペルミスや記号の記述漏れについては、後にご紹介する予防策にて対策することが可能ですのでぜひ最後までご覧ください。

④他に優先度の高いCSSの記述がないか確認する

CSSでは、同じ要素に対して複数CSSを記述することができ、同じプロパティの記述が複数ある場合優先度が一番高い記述が反映されます。

気づかないうちに複数のCSSを記述してしまっていて、反映させたいCSSよりも優先度の高い記述が既に存在すると、CSSの記述ミスがなくても反映されません。

どの要素にどのCSSが記述されているかは、ブラウザの検証ツールを利用することで確認できるので、コーディングを行う際には検証ツールを使いながら表示確認を行うと良いでしょう。

F12キーを押すことで検証ツールを開くことができますが、F12キーの存在しないキーボードを使用している場合は以下のショートカットキーでも検証ツールを開くことができます。

Mac → 「Command」 + 「Option」 + 「I」
Windows → 「Ctrl」 + 「Shift」 + 「I」

検証ツールは、CSSの確認以外にも様々な用途がありますので、使い方を覚えておくとコーディングにおいて色々な役に立ちます。

⑤インライン要素に対して効かないCSSを記述している

<a>タグや <span>タグなどのインライン要素に対しては、widthやheightなどの一部のCSSプロパティが効きません。

インライン要素に対してそれらのCSSプロパティを記述したい場合には、インライン要素をCSSでブロック要素に変えてあげる必要があります。

.sample {
  display: block;
}

インライン要素に対して効かないCSSプロパティの例です。

CSSプロパティ	備考
上下のmargin	margin: 0 auto; も効きません。
text-align	–
width	<img>タグもインライン要素ですが、例外で効きます。
height	<img>タグもインライン要素ですが、例外で効きます。

以下のようなものがインライン要素に当たります。