WEBサイト制作をしていると、htmlを書き上げていざブラウザチェックをしてみたらデザインがガタガタになっていた！という状況にわりとよく出会います。

そんな時こそ落ち着いて、htmlとcssをゆっくりチェックしてみることが大切です。cssが反映されない時のチェックポイントを3つ上げてみます。

1.cssが外部ファイルの場合、読み込みのためのパスは合っているか

外部ファイルで設定しているcssが反映されない場合、真っ先に疑ってみるのは、cssファイルまでのパスが正しいかという点です。

そのhtmlファイルからcssファイルまでの相対パスは、しっかり設定できていますか。格納されている場所、フォルダやファイルどうしの位置関係をまずはしっかり確かめましょう。

スポンサーリンク

2.cssの記述順は合っているか

外部ファイルでcssを設定する場合、htmlのhead内に書かれたcssは、上から順番に読み込まれます。上下で同じcss要素を指定した場合、下側のcss要素が上書き、優先されて反映されます。

3.idやclassはちゃんと書けているか

html側ではidで設定しているのに、css側ではclassで書いてしまった……

idとclassを、html側とcss側で違って設定してしまうのは、わりあい起こしやすい失敗です。cssがうまく反映されなかったら、まず最初に疑ってみましょう。

idは、htmlでは”id”、cssでは”#”(シャープ)で指定します。classは、htmlでは”class”、cssでは”.”(ドット)で指定します。

また、htmlでつけたidやclass名と、css側でのスペルが間違っている可能性もあります。できれば正しいものを両方にコピペするなどして、必ず同じスペルにするようにしましょう。

多くの場合、これらの単純なミスが原因となっているように思います。WEBサイトのデザインが崩れている時は、落ち着いてひとつずつ間違いの多いポイントをチェックしていきましょう。

スポンサーリンク