コーディング犬に聞く：「CSSが効かない時どうする？」
Web制作をしていると、
誰もが一度は経験するのが、
「CSSが効かない！」
です。
例えば、
color:red;と書いたのに、
色が変わらない。
margin:30px;を書いたのに、
余白が付かない。
初心者の頃は、
「なんで！？」
となります。
今回は、
「CSSが効かない時どうする？」
という悩みをコーディング犬に相談してみました。
Q. CSSが効かない時は何を疑う？
「まず落ち着こう！」
実は、
CSSが効かない原因の8割くらいは、
決まったパターンです。
Q. 一番多い原因は？
「class名の打ち間違い！」
例えばHTML。
<div class="service">CSS。
.servise{
color:red;
}あれ？
service
serviseになっています。
たった1文字違うだけで、
CSSは効きません。
Q. 次によくある原因は？
「CSSファイルが読み込まれてない！」
例えば、
<link rel="stylesheet" href="style.css">のパスが間違っている。
すると、
CSS自体が読み込まれません。
Q. 確認方法は？
Chromeの検証ツール。
Windows
F12Mac
⌘ + Option + Iまずこれを開こう。
Q. セレクタが間違ってることもある？
「めちゃくちゃある！」
例えば、
HTML。
<div class="title">CSS。
.titel{
}効きません。
スペルミスは本当に多いです。
Q. でもスペルは合ってるのに？
「優先順位を疑おう！」
例えば、
.title{
color:red;
}の後に、
.title{
color:blue;
}がある。
すると、
青になります。
後から書いた方が優先されます。
Q. !importantって関係ある？
「かなり関係ある！」
例えば、
.title{
color:red !important;
}があると、
普通のCSSは負けます。
初心者がハマりやすいポイントです。
Q. marginが効かない時は？
「displayを確認！」
例えば、
<span>テキスト</span>spanは、
display:inline;です。
なので、
marginやwidthが思ったように効かないことがあります。
Q. widthが効かない時もある？
「それもinline要素！」
例えば、
<a>や
<span>です。
その場合は、
display:block;や、
display:inline-block;を試します。
Q. absoluteが変な場所に行く！
「relativeが無い！」
これは前回も話したね。
.parent{
position:relative;
}
.child{
position:absolute;
}このセットが重要です。
Q. CSSを書いたのに反映されない！
「キャッシュかも！」
特にWordPress。
CSSを更新したのに、
古いCSSが表示されることがあります。
そんな時は、
Ctrl + F5または、
Shift + 更新を試します。
Q. WordPressで多い原因は？
例えば、
style.cssを修正したつもりが、
実際は、
common.cssが読み込まれていた。
これは本当によくあります。
Q. 検証ツールはどう使う？
要素を右クリック。
検証を押します。
すると、
適用されているCSSが見れます。
効いていないCSSには、
取り消し線が付きます。
これが超重要。
Q. プロはどうやって調べる？
ほぼ100％、
検証ツールです。
感覚ではなく、
実際にどのCSSが当たっているかを見る。
これが一番早いです。
Q. CSSが効かない時のチェックリストは？
まずこの順番。
✅ class名
✅ スペルミス
✅ CSS読み込み
✅ 優先順位
✅ display
✅ position
✅ キャッシュ
✅ 検証ツール
ほとんどはここで解決します。
まとめ
CSSが効かない時は、
焦ってコードを書き直す前に、
原因を順番に確認することが大切です。
まずは、
- class名は正しいか
- CSSは読み込まれているか
- 優先順位で負けていないか
- キャッシュではないか
を確認しましょう。
そして、最強の味方は
Chrome検証ツールです。
CSSが効かない時は、「コードが壊れている」
のではなく、「原因がどこかにある」だけです。
1つずつ確認すれば必ず解決できます。
コーディング犬との約束です。
