【CSS】CSSが効かない時の対処法を解説【コピペOK】

「CSSが効かない！」という場合の対処方法を説明します。

ミスが起こりやすい順番に分けて解説をしていきます。

この記事を読んでできること

・CSSが効かない時の対処法を理解することができる
・レイアウトが崩れた時でも冷静に対処することができる

記述ミス

上級者から初心者まで、最も多いミスとされます。

自分を疑うのは気が引けますが、どんな人でも間違いはあります。
特にエディタの恩恵を受けられない「メモ帳」でコーディングしている時に起きやすいと言われています。

順に見ていきましょう。

①閉じタグがない

こちらをご覧ください。

【閉じタグが足りない時】
<div>
　<div>
　　テキスト
</div>

「divばっかり使わずにul・liも使いなさい」とよく言われるのは、可読性(読みやすさ)向上が目的にあります。

この例はたった4行ですが、長いコードになると人力で探すのは困難です。
そんな時の対処法も最後に紹介いたします。

②必要な記号が消えている/違っている

【必要な記号が消えている時】
①<div
②<img width="360 >
③body{
④margin:0

続いてこちら。これは一目見ると違和感が分かりますね。
それぞれ、下記の記述がそれぞれ抜けてしまっています。

記号はセットで書く

案外大事です。
;(セミコロン)は書かない上級者もいますが慣れるまでは:(コロン)と一緒に書くことを意識しましょう。

具体例

似た場合で、下記のようなこともあります。

【htmlは=(イコール)/CSSは:(コロン)】
<img width:360;>
<img style="width=360">

【CSSは{}で囲む】
div[
margin:0;
]

【,はそれぞれに指定する/.はheaderクラスに指定する】
main,header{margin:0;}
main.header{margin:0;}

【_と-を間違えている】
.icon_about{margin:0;}
.icon-about{margin:0;}

【"（ダブルクォーテーション）」が全角】
<img width=”360”>

今一度、htmlとCSSのどちらで指定して、どこに何を指定したいかを確認してみましょう。

全角半角やスペース、キーボードの隣に設置されている「.」や「,」などは特に注意して見直しをしてみましょう。

idとclassを間違えている

こちらも多いミスです。
idとclassの基本をおさらいしてみましょう。

があります。
よくあるパターンとして、以下のような場合があります。

【1つの要素内で2度指定している】
<div id="main" id="inner">テキスト</div>
<div class="main" class="inner">テキスト</div>

【classを2つ指定するときは半角スペースが必要】
<div class="main inner">テキスト</div>
<div class="main_inner">テキスト</div>

CSS指定ミス

スペルとか記述は絶対大丈夫！という方はこちらの可能性が高いです。

CSSについて、順に見ていきましょう。

CSSファイル自体読まれていない

パスが間違っていないか、CSSファイルが上がっているか、キャッシュを読み込んでいないか確認しましょう。

優先度で負けている

CSSは優先度があり、これが負けていると正しく効きません。

【優先度負けてる】
body .text{margin:0;
}
.text{
margin:10px;
}

上の場合、bodyがついていない「margin:10px」が反映しません。

解決策としては

があります。

インライン・ブロック要素の理解不足

インライン要素とブロック要素の違いはご存じでしょうか？
インライン要素の場合、効かないCSSが多数あります。

div要素は最も使うタグの1つ。の為、自動で縦並びになります。
一方、インライン要素は、自動で横並びになります。

こちらをご覧ください。

横いっぱいに広がるブロック要素
文字の分だけ広がるインライン要素

全く同じCSSを当てても、タグが異なるだけで表示が変わります。
インライン要素はwidthと上下のmarginが効きません。

難しいレイアウトを使うCSS

CSSに慣れてないと崩れやすい・失敗しやすいCSSがあります。
対策はそれぞれ異なります。

・hover
・display:flex
・margin:0 auto
・first-child/last-child
・疑似要素 before/after

まとめ

CSSについての疑問は解消できたでしょうか。
思い通りにならない、自分のミスを見つかる等でイライラすることもあると思います。

しかし、一回やったミスは無意識に気をつけるもので、今後のコーディングがスムーズになります。
大変だと思いますが、1つづつ丁寧に修正して作りたいレイアウトに一歩でも近づきましょう！