CSS（カスケーディング・スタイル・シート）は、Webページの見た目を整えるための重要な言語です。しかし初心者にとって、ちょっとした書き間違いやルールの理解不足が原因で「スタイルが反映されない」「デザインが崩れる」といったトラブルがよく起こります。この記事では、初心者が特につまづきやすいCSSのエラーとその対策を紹介します。

1. セレクタの書き間違い

症状：スタイルが反映されない

よくあるミス：

p.red-color {
  color: red;
}

上記は「p要素で、classがred-colorの要素」に対して適用されます。
classがred-colorでもp要素以外には効きません。

対策：正しいセレクタを理解する

.red-color {
  color: red;
}

特定のclassにスタイルを当てたい場合は、タグ名を含めず .class名 だけでOKです。

2. プロパティ名や値のスペルミス

症状：一部のスタイルだけが無効になる

よくあるミス：

colorr: blue;  /* "color" のスペルミス */

対策：スペルチェッカーやエディタの補完機能を活用する

Visual Studio Codeなどのコードエディタは、間違ったプロパティに警告を出してくれます。

3. セミコロンの付け忘れ

症状：次のスタイルが反映されない

よくあるミス：

h1 {
  font-size: 20px
  color: red;
}

対策：各プロパティの末尾には必ずセミコロンを付ける

h1 {
  font-size: 20px;
  color: red;
}

こちらもVisual Studio Codeなどのコードエディタでは、自動でセミコロンを付与してくれる拡張機能などが存在します。こうした機能を上手く活用していきましょう。

4. CSSファイルがHTMLに正しく読み込まれていない

症状：スタイルが全く適用されない

よくあるミス：

<link href="style.css">

上記には rel="stylesheet" が抜けています。
「rel」は「relation（関係）」の略で、リンク先のファイルとの関係性を示します。
省略するとブラウザがCSSファイルを無視してしまい、正しく機能しない可能性があります。

対策：linkタグを正しく書く

<link rel="stylesheet" href="style.css">

href内のパスはご自身の環境に合わせて適宜変更が必要です。
こちらもパスが合っていないとスタイルが反映されません。

5. 優先順位と競合の理解不足

症状：意図しないスタイルが適用される

よくある例：

/* 共通スタイル */
p {
  color: black;
}

/* 特定のクラス */
.text-red {
  color: red;
}

HTML:

<p class="text-red">赤くしたいテキスト</p>

この場合は後から書いた.text-redの内容が反映されます。
しかし、さらに強いセレクタや!importantが加わると逆転する場合もあるので注意が必要です。

さらに詳しく：詳細度のルール（Specificity）

CSSには「どのスタイルを優先するか」というルール（詳細度、specificity）があります。

優先順位の目安（高い順）:

1. インラインスタイル（例：style="color: blue;"）
2. IDセレクタ（例：#header）
3. クラスセレクタ、属性セレクタ、擬似クラス（例：.menu, input[type="text"], :hover）
4. タグセレクタ（例：div, p）

同じ要素に複数のスタイルが指定されている場合、基本は上記の順番に従ってスタイルが適用されます。
また、!important をつけたプロパティは、上記のルールよりも強制的に優先されます。

p {
  color: black !important;
}

これは避けられない場合を除き、多用しないようにしましょう。

補足：より詳細なセレクタが優先される

セレクタの具体性（詳細さ）も優先順位に影響します。

.article p {
  color: green;
}

p {
  color: blue;
}

この場合、.article p の方がより具体的なセレクタなので、color: green; が適用されます。
このように具体性が高い指定があると後から記述したcssが反映されない場合があるので注意しましょう。

対策：

• より具体的なセレクタを書く（例：div .text-red）
• !importantを多用しない
• スタイルの競合をブラウザの開発者ツールで確認する
• CSSの記述順や構造にも注意する

まとめ

CSSは正しく書かないと反映されないため、小さなミスでも大きな見た目の崩れにつながります。今回紹介したような基本的なエラーと対策を押さえておけば、初歩的なつまづきは回避できるはずです。困ったときは、ブラウザの開発者ツール（F12キー）を活用して原因を探ってみましょう！