よくあるミス CSS編

この章では、CSSでよくあるミスを紹介します。

CSSの全部がそもそも適用されないよ～～～

CSSが適用されないときは、大体HTMLのhead部分に<link rel="stylesheet" href="style.css">と書いていないことや、ファイル名がそもそも違う問題が多いです。CSSファイルを作成したら、必ずHTMLのhead部分に<link rel="stylesheet" href="style.css">と書いて、CSSのファイル名も間違っていないか確認しましょう。

セレクタのスペルミス

CSSのセレクタは、HTMLの要素やクラス、IDなどを指定するためのものですが、スペルミスをするとスタイルが適用されません。例えば、クラスである.childを.chidと書いてしまうと、スタイルが適用されないので注意しましょう。

プロパティのスペルミス

CSSのプロパティもスペルミスをするとスタイルが適用されません。例えば、background-colorをbackgroud-colorと書いてしまうと、スタイルが適用されないので注意しましょう。

関数の引数が間違っている

CSSのプロパティの値で、特に関数になっている部分では、引数の順序や値が間違っていると期待したスタイルが適用されません。例えば、rgba(255, 0, 0, 0.5)で透明度を指定する際、引数の順序を間違えると色が正しく表示されません。また、transform: translate(50px 100px)のように、引数を区切るカンマがなかったり、関数の引数が正しくないと、要素が期待通りに移動しないことがあります。 関数の引数は、プロパティによって異なるため、公式ドキュメントなどで正しい引数の順序や値を確認することが重要です。

同じセレクタを複数回書いている

同じセレクタを複数回書いていると、どのスタイルが適用されるのか分からなくなります。例えば、以下のようなコードがあります。

.child {
    color: red;
}
.child {
    color: blue;
}

このコードでは、childクラスの要素に対して、最初に赤色が指定され、その後に青色が指定されています。CSSのルールでは、同じセレクタが複数回書かれている場合、最後に書かれたスタイルが優先されるため、この場合は青色が適用されます。同じセレクタを複数回書くと、どのスタイルが適用されるのか分からなくなり、バグの原因になることがあります。同じセレクタは1回だけ書くようにしましょう。

作成:2026-06-15 YGMS_yukkuri