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