CSSがきかないとき、最初に確認すべき5つのこと

時間をかけて書いたcssが全然効かないトラブルはよくありますが、中には些細なミスが原因なものも少なくありません。

初心者がやりがちなミスから、ともすればベテランでもたまにやってしまう些細なミスを列挙します。

閉じタグ忘れ

閉じタグ「 } 」忘れ。
sublime textなどエディタによっては「 { 」を書いた時点で自動的に閉じタグを挿入しれくれますが、わざわざそれを消してしまったりする凡ミス。

html側が「 id=”hoge 」になっている場合もあります。(がついていない)

スペルミス

セレクタのスペルミス。プロパティのスペルミス。値のスペルミス。
htmlでは「id=”hoge”」なのにcssでは「#hage」になっているなど、様々なパターンが存在します。

キャッシュ

css自体に問題はないのに、キャッシュが残っていて修正が反映されていないという罠。
キャッシュクリアしてから更新しましょう。

ファイルの指定ミス

CSSが丸ごと反映されないときは大体これが原因。
html側の< link >を見直してみましょう。一度だけ

<link href="stylesheet" rel="sample.css" type="text/css">

というミスも見たことがあります。

cssファイルの参照ミスはローカルで開発したデータをあげるときなどにやりがち。

ブラウザ、またはブラウザバージョンが未対応

css2、css3、草案段階のcss4、とcssでできることはどんどん増えていますが、天敵InternetExplorerはもちろん、他のモダンブラウザであっても古いバージョンが対応していない場合があります。
Can I Useでブラウザがcssに対応しているか確認してみましょう。https://caniuse.com/

どんな言語でもそうですが、ほんの些細なミスが1つあるだけで正常に動かなくなります。

それに気づかず、修正に時間をとられるのは本当にもったいないです。

「上のようなミスがある」と分かって臨むだけでも些細なミスに気付きやすくなる&ミスをしなくなりますので、頭の片隅に置いておいてください。

タイトルとURLをコピーしました