html/css始めたての頃って、htmlファイルを打って、cssファイルを打って、えいやってブラウザにドロップしても…
ページが真っ白！！
ってなることありません？
頭も真っ白になっちゃいますよね。これはそんなときのトラブルシューティング記事です。
cssが効かない？背景色が効いてない！？文字色が反映されない！？
そんなときにオールマイティに解決できると思います★
綴り間違いなどの可能性って案外多いので、「いやいや間違えてないし…」と思っても目を皿にしてチェックしてみてくださいね。
可能性1：CSSを正しく読み込めていない
そもそも、htmlとcssの紐づけがされていない… なんてことはありませんか？
<head></head>タグの間に、
<link href="〇〇.css" rel="stylesheet">と記述があるかチェックしてみてくださいね。
- 読み込む記述があるか
- 全角スペースが混ざっていないか
- 綴りは間違えていないか（↑のものをコピペしてもOKです★）
- cssへのパスが間違えていないか
上記4点を意識できれば、cssの読み込みはできていると考えていいでしょう。
これで解決しない場合は、次の検証に移ります。
可能性２：背景色しか設定していなくない？
そのページ、背景色しか設定していないタイプだったりしませんか？
ボックス割の仕方の練習をしている場合等、うっかり失敗すると真っ白になりがちです。
チェックポイントとしては、まず
- 背景色を設定しているボックスの内側に、htmlで文字を入力してみましょう
<div class="box">
</div>これを
<div class="box">
表示テスト
</div>こんな感じに！
これをして、原因がhtmlファイルにあるのかcssファイルにあるのかを判断します。
.boxにcssで背景色を指定している場合、文字を入れると背景色が出る場合があります。背景色は、高さが無いと表示されません！
これで背景色が表示できたのなら、今回cssが真っ白になった原因は「背景色を設定しているのに高さを持たせていなかった」からです。heightなどで高さを入れてあげましょう。解決おめでとうございます。
これをしても文字が出るだけで背景色が出ないよ？という場合は、
- セレクタはhtmlのclassと合っているか？
（cssの「.〇〇」とhtmlの「<div class=”〇〇“>」が一致していないとだめです） - 背景色を指定する記述の綴りは間違っていないか？
ここをチェックしてみましょう！
それでも解決しない場合は可能性3を潰しにいきましょう！
可能性３：背景色の指定じゃない部分の記述エラーに巻き込まれてない？
案外見落としがちなのがこちら。
背景色の記述ばっかり確認しがちですが、そこより前の記述にエラーがあると、以降の記述が正しく読み込まれなかったりします。
- 全角スペースが混ざっていないか？
- コロン（:）やセミコロン（;）は抜けていないか？
- 綴りが違っている箇所がないか？
（auto → out になっていたり、 margin → maegin になっていたり） - 設定できない値を設定していないか？
（paddingにautoを設定しているとか）
ここまでチェックできたらもうCSSはばっちり読み込めることと思います。
全角スペースが混ざっていないか？綴りにエラーがないか？はエディタ上で自動で確認してくれる機能があるので、追々ご紹介します！
関連記事
