初心者がCSSでつまずく3つのポイント（セレクター／HTMLとの関係／デバッグ）

原因

セレクターの概念を理解していない

セレクターとは何か説明できますか？説明できない場合、まずは、セレクターの概念を理解する必要があります。

セレクターの種類を理解していない

セレクターには様々な種類があり、効果が異なります。全てのセレクターを理解する必要はありませんが、よく出てくるセレクターは覚えておく必要があります。

セレクターの優先順位を理解していない

セレクターには優先順位があります。優先順位が高いセレクターが勝ち、低いセレクターは上書きされてしまいます。優先順位があることを理解しましょう。

解決策

セレクターの概念を理解しよう

セレクターは「どのHTMLタグにスタイルを当てるか」を決める仕組みです。

セレクターの種類を理解しよう

セレクターについてわかったら、次はセレクターの種類を理解しましょう。セレクターには次の基本セレクターがあります。

覚えておきたい基本セレクター

セレクターの優先順位を理解しよう

セレクターには優先順位があります。優先順位が高いセレクターが勝ち、低いセレクターは上書きされてしまいます。

優先順位が高いセレクターが勝ち、低いセレクターは上書きされます。例えば、要素セレクターで指定したcolorとIDセレクターで指定したcolorを比較した場合、IDセレクターで指定したcolorが優先されます。

<h1 id="post">タイトル</h1>

/* idセレクタの方が優先度が高いため文字は赤色になる */
#post {
  color: red;
}

h1 {
  color: blue;
}

CSS基礎講座ではセレクターについて解説しています。ぜひ参考にしてください。
2. 基本構文＆コメントの書き方

原因

HTMLを読み解く力が不足している

CSSはHTMLの構造に対して見た目を指定します。CSSの対象となるHTMLを読み解く力が不足していると、正しいCSSを書くことができません。対象となるHTMLの理解が必要不可欠です。

解決策

HTMLのタグの意味を理解しよう

HTMLの基礎を理解することで、正しいHTMLを書くことができます。それぞれのタグの意味を理解することが、正しいHTMLを書くための第一歩です。

HTMLの入れ子構造を理解しよう

HTMLの入れ子構造はCSSのセレクターの指定に影響します。親要素、子要素、子孫要素の関係を理解することが必要です。

原因

• デバッグの手順を知らない
• ツールの使い方を知らない

解決策

デバッグ手順を理解し、開発者ツールで原因を調査します。

デバッグ手順

1. CSSが読み込まれているか：まずはCSSが正しく読み込まれているかを確認します。この確認には開発者ツールが必要です。
2. セレクターが当たっているか：対象の要素にセレクターが当たっているかを確認します。
3. 優先順位の確認：どのルールが勝っているかを確認。必要ならクラス構造を見直す
4. 文法エラーが発生していないか：HTML、CSSの文法エラーが発生していないかをツールを使って確認します。

便利なデバッグスニペット

要素のアウトラインを表示すると、どの要素にCSSが当たっているかを視覚的に確認でき、デバッグ時に便利です。次のコードをCSSの先頭に追加してみてください。

/* 要素のアウトラインを表示 */
* { outline: 1px dotted rgba(0,0,0,.2); }