コーディングに取り組んでいる方なら、スタイルシートのデザインがうまく効かなくてイライラした経験があると思います。私の経験上デザインが適用されない原因の９割以上は基本的なミスによるものです。ここでは、自分だとなかなか気がつくことができない凡ミス、私が過去にしてきた間違いあるあるをご紹介します。
コンテンツ
そもそもスタイルシートがページと関連付けられていなかった
編集していたスタイルシートがページに関連づけられていなかったというミスです。WordPressで既存のテーマを編集する場合は問題ありませんが、新規でCSSファイルを作成した場合は注意が必要です。そもそもスタイルシートが読み込まれていなかったら何をやっても適用されないのも当たり前ですよね。
class名やid名の頭文字が数字になっていた
class名やid名の１文字目は必ずアルファベットというのを知らずに過去にドツボにはまった経験があります。class名、id名で使用できる文字は、アルファベット（大文字・小文字）、英数字、 アンダーバー（_）、ハイフン（-）になります。
クラス名の手前の「.」ID名の最初の「#」が抜けていた
これは今でもたまにやってしまいます。スタイルシートに記入するセレクタのclass名のところの「.」書き忘れないように気をつけましょうね。
タグにclass名を入れ忘れていた
class名を考えてスタイルシートに記入はしたけど、HTMLの方で属性を指定していなかったというミスです。コーディングで疲れてくるとこういうミスが始まります。こういうときはコーヒーで一休みしましょう。
プロパティのスペルが間違っている
プロパティを手入力しているとミスしてしまうことがよくあります。入力補助をしてくれるツールを使用するなど効率化を図ると良いと思います。
値のところに「px」「%」といった単位を記入していない
単位を記入すべき値と、しなくても良い値があったりしますが、数字の場合は、基本的に単位がないと効いてくれません。頭の中では、「px」のつもりでも、ちゃんと単位を記入しないとパソコンは分かってくれません。
ダブルクォーテーションマークが半角じゃない
「”」と「”」の違い分かりますか？見た目はほとんど変わりありませんが、実は左側は半角ではありません。classやidの名前を付ける際、class=”example”←このように記載してしまうとスタイルが反映されません。見た目が非常によく似ているので気をつけてください。
スタイルシートの「:」や「;」の記入漏れ
セミコロン「;」を入れたつもりがコロン「:」になっていませんか？また、セミコロンを入れ忘れると、そのセレクタ内の後に書かれたデザインが無効になります。
閉じカッコ「}」の記入忘れ
最後のカッコ「}」を間違って消してしまったり余計にカッコが付いていたりすると、そこから下のスタイルシートがすべて効かなくなります。スタイルシートを編集していて、いきなり全体のデザインが崩れ始めたときはこれを疑いましょう。
ページの更新忘れ
最新でないページとにらめっこしたり、スタイルシートの編集画面を保存していないなど、おっちょこちょいな方に多いミスです。
半角スペースのミス
セレクタで複数の要素やclass, idなどを指定するときに「半角スペース」が問題になるケースがあります。例えば、次のような場合です。
１．要素名とclass名やid名の間に半角スペースを入れると親子関係という意味になる
「div .example」→「div要素の子要素のexampleクラス」
２．半角スペースを入れない場合は「かつ」という意味
「div.example」→「div要素であり、かつexampleクラスでもある」
３．擬似クラス、疑似要素の「:」の手前にスペースを入れてはいけない。
誤：.example: first-child
正：.example:first-child
CSSの優先順位が低い
これは少しだけ難易度が高いミスです。スタイルシートの優先順位については下記の記事をご参照ください。
