CSSが効いてない!?そんなときにチェックしたいポイント


最終更新日:2020.11.14
Pocket

html/css始めたての頃って、htmlファイルを打って、cssファイルを打って、えいやってブラウザにドロップしても…

 

ページが真っ白!!

 

ってなることありません?

頭も真っ白になっちゃいますよね。これはそんなときのトラブルシューティング記事です。

cssが効かない?背景色が効いてない!?文字色が反映されない!?

 

そんなときにオールマイティに解決できると思います★

綴り間違いなどの可能性って案外多いので、「いやいや間違えてないし…」と思っても目を皿にしてチェックしてみてくださいね。

 

可能性1:CSSを正しく読み込めていない

そもそも、htmlとcssの紐づけがされていない… なんてことはありませんか?

<head></head>タグの間に、

<link href="〇〇.css" rel="stylesheet">

と記述があるかチェックしてみてくださいね。

  • 読み込む記述があるか
  • 全角スペースが混ざっていないか
  • 綴りは間違えていないか(↑のものをコピペしてもOKです★)
  • cssへのパスが間違えていないか

上記4点を意識できれば、cssの読み込みはできていると考えていいでしょう。

これで解決しない場合は、次の検証に移ります。

 

可能性2:背景色しか設定していなくない?

そのページ、背景色しか設定していないタイプだったりしませんか?

ボックス割の仕方の練習をしている場合等、うっかり失敗すると真っ白になりがちです。

 

チェックポイントとしては、まず

  • 背景色を設定しているボックスの内側に、htmlで文字を入力してみましょう
<div class="box">
</div>

これを

<div class="box">
  表示テスト
</div>

こんな感じに!

これをして、原因がhtmlファイルにあるのかcssファイルにあるのかを判断します。

.boxにcssで背景色を指定している場合、文字を入れると背景色が出る場合があります。背景色は、高さが無いと表示されません

 

これで背景色が表示できたのなら、今回cssが真っ白になった原因は「背景色を設定しているのに高さを持たせていなかった」からです。heightなどで高さを入れてあげましょう。解決おめでとうございます。

 

これをしても文字が出るだけで背景色が出ないよ?という場合は、

  • セレクタはhtmlのclassと合っているか?
    (cssの「.〇〇」とhtmlの「<div class=”〇〇“>」が一致していないとだめです)
  • 背景色を指定する記述の綴りは間違っていないか?

ここをチェックしてみましょう!

 

それでも解決しない場合は可能性3を潰しにいきましょう!

 

可能性3:背景色の指定じゃない部分の記述エラーに巻き込まれてない?

 

案外見落としがちなのがこちら。

背景色の記述ばっかり確認しがちですが、そこより前の記述にエラーがあると、以降の記述が正しく読み込まれなかったりします。

  • 全角スペースが混ざっていないか?
  • コロン(:)やセミコロン(;)は抜けていないか?
  • 綴りが違っている箇所がないか?
    (auto → out になっていたり、 margin → maegin になっていたり)
  • 設定できない値を設定していないか?
    (paddingにautoを設定しているとか)

 

ここまでチェックできたらもうCSSはばっちり読み込めることと思います。

 

全角スペースが混ざっていないか?綴りにエラーがないか?はエディタ上で自動で確認してくれる機能があるので、追々ご紹介します!

 

 

関連記事

エディタ別!全角スペースを表示する方法

 

Pocket