CSSが効かない原因！反映させるため、ブログ初心者さんが確認する7つのこと

反映していたCSSが突然、反映しなくなった原因はホントに沢山あります。編集後のコードの消し忘れや消しすぎなどが原因です。コメントアウトのミス、CSSの構文があっているかなどを書いていきます。このほか基本的な事で確認するのは下記4つ。

1. キャッシュを削除するか、シークレット（プライベート）ウィンドウでキャッシュが残っていない状態で確認

1. スマホやPCのみに反映するメディアクエリの中に書いてないか
   • 具体的なコードは、見出し5書いてる場所が違ってるときの解決方法。に書いてます＾＾
2. セレクタの指定方法が間違ってないか
3. CSSの優先順位が低いからではないか

他CSSが反映されないとき、意外な落とし穴がコメントアウト。あとCSSの構文があってない。もう1つブラウザのキャッシュも削除したのに、反映しない原因に書いてるとおりです。それぞれ説明を見て確認すると反映するので、チェックしてくださいね＾＾

突然CSSが反映されなくなった原因、コメントアウト編

CSSのコメントアウトとは、反映させたくないコードを消さずにコメント化したり、メモとしてスタイルシートに/*ほげほげ*/を書いてコメントにしたりして使います。変な文字が入ると場合によって、CSSが反映しなくなるから、コメントアウトする感じですね。

下記コードでは1行目と、2～4行目の記載が、コメントアウトしたものです。

/*h2のフォントサイズ変更*/
/*h2 {
	font-size: 22px;
}*/
h2 {
	font-size: 20px;
}

/*から*/の間にスタイルを指定してるとき、一見コメントアウトしてないように見えても、ず～っと上・ずっと下にこの記載があれば、その間のコードは反映しません。

コメントアウトが途切れている場合も装飾が反映しないので、見てみましょう❦

コメントアウトが途切れて、装飾が反映されてないか確認

コメントアウトが途切れると言えば、コメントの中にコメントがある場合！

/*h2 {
	font-size: 22px;
	margin: 48px -5px 24px;
	position: relative;
	border-bottom: 1.5px solid #D0A8F5;
	position: relative;
	background: #ffe7fc;
	line-height: 30px;
	border: 1px dashed #D0A8F5;
	border-radius: 5px;/* 角丸 */
	box-shadow: 5px -5px 20px 0 #FFD5FA inset;
	margin-bottom: 30px;
	padding: 1.2em 0.4em 0.6em 1.8em;	
}*/

10行目に/* 角丸 */というコメント。最初/*と最後*/で全てコメント化させたはずなのに、実はコメントは10行目で途切れてしまって、以降のコードがむき出しになります。

10行目/* 角丸 */のコメントまでがコメント！と、CSSはとらえるワケですね。

コメントアウトの閉じ忘れをチェック

コメントアウトの閉じ忘れは、コメント開始/*は書いたのに、終了*/の書きわすれ・編集時に気付かず消しちゃったとき。CSSが反映しない原因になります。

h2のコメント開始マーク/*から、次のコメントアウトまで、このように全て消えます。

そのため編集後、触った覚えのない箇所のスタイルが反映されない。。まさに、なんで？となるのは、CSSは開始マーク/*から閉じるマーク*/を探し、見つけたところまでコメントにする言語。そういうイキモノ！っとでも、思ってください❦

閉じ忘れと同時に、次のパターンも注意して確認してください。

コメントの閉じ間違い

/*コメント*/部分が間違っていると、次のコメントアウトまでのCSSが全部反映されません。

たとえば閉じるマーク*/にスペースが入ったとき* /や、閉じたつもり*/が開始/*になってるなど。

コメントの始まりは反映されたまま、終わり間違ってるとコメントとして成立しないので上記と同じ、次の閉じる*/までコメント扱いになりCSSが反映しません。

コメントアウトの書き方もチェックしてくださいね。

コメントアウトの間違いがないか、楽に確認する3つの方法

コメントアウトがキチン出来てるか目視で確認するのは、コメント部分が緑など色分けされてなければ大変です。

1. コメントにカラーが付いてるエディタを導入
2. PCから要素の検証からコメントの色が付いたCSSを見る
3. CSS検証サービスを使う

などすれば楽に確認できるので、環境によってやりやすい方法を選んでください＾＾

エディタを導入して確認する

環境にあったテキストエディタを導入したら、コメントアウトが外れてしまったのを簡単に確認できます。

テキストエディタで見たら、装飾したいh2が消えて、11行目から14行目だけコメント化されてない文字になってます。もしエディタを導入してないのであれば、TeraPadは初心者向けで扱いやすいです。

LINKTeraPadのダウンロード

エディタを導入したらTeraPadを開いて、あなたが書いたCSSスタイルシートを全選択コピーして、TeraPadに貼り付けます。メニューにある表示をクリックし、編集モードをCSSに変更してください。

そうすれば、コメントアウトが緑になり分かりやすいので、おかしなコメントアウトがないか、確認しやすくなります。

パソコンからブラウザの要素の検証を使って確認

PCからキーボードのF12キーをつかって、要素の検証画面からCSSを表示して確認したら、色分けされて分かりやすいです。Chromeでしたら、F12を押して画像１の矢印マークが青い状態で、あなたが装飾したものをクリック画像２。

画像3その装飾されたCSSを選択する。リンクを装飾していれば、a { hoge: yotto; }であなたの装飾したstyle.cssをクリックしたら、スタイルシートが表示され便利です❦

GoogleChromeでのその他使い方の説明は下記リンクをどうぞ。

LINK要素の検証の使い方！初心者がカスタマイズできる方法！HTMLとCSS入門編

W3CのCSS検証サービスを使う

CSS検証サービスを使ってみるの方法もありますが、初心者的にちょっと難しく感じる記載がいっぱい出てきますけど、頑張れば、おかしな記載を教えてくれます。！

• ブログのURLを指定して全てのCSSを検証する方法
• PC上にCSSファイルのバックアップファイルを選んでアップロードする方法
• あなたが書いたCSSや使っているCSSを貼り付けて検証する直接入力

あった方法で試してくださいね。※ばあいによって、難しい言葉もたくさん出るかも！？ですが、分かる範囲を直していくと、改善されますよ。

LINKW3C CSS 検証サービス

CSSの構文を間違って更新したら、反映しない

CSSの構文が間違ってるから、反映しない場合です。※反映するときもある。構文っていうと難しく感じるけど、下記のよう、かなりシンプルに考えてください。

htmlのどこ場所の { 何を: どうする; }　この赤字が基本的なCSSの構文で、CSSにすればこんな感じ。

h2 {
	font-size: 22px;	
}

1. 装飾したいものh2{　←半角始まりカッコ この装飾の始まり
2. フォントサイズを:　←半角コロン 決まり文句
3. 22pxにする;　←半角セミコロン 決まり文句
4. }　←半角閉じカッコ この装飾の終わり

半角のマークはピンクの説明で、構文です。赤文字の部分をCSSの言葉で言えば、下。

• 『h2』にあたるのはセレクタ
• 『何を』のfont-sizeは、プロパティ
• 『どうする』の22pxを、値
• セレクタ { プロパティ: 値; }
• コレが構文の形

上のシンプルなCSSh2 { font-size: 22px; }この、シンプルなHTMLタグが下。

h2のHTMLタグに囲まれたモノを、セレクタを指定してプロパティと値で装飾を増やしてスタイルを決める感じ。

h2 {
	font-size: 22px;
	margin: 48px -5px 24px;	
}

そのときに構文の形は必須で、（キホン）半角で書く！って思ったら、良くできましたの『花丸を贈呈したい』ほどキホンの構文を攻略完了です❦

編集時に{:;}を消してしまってないか

上で書いた構文、CSSの始まりを示す{、終わりを示す}が無ければ、どこまで反映させたらいいか、CSSが理解できないです。

:;これらも状況によって、支障が出るばあいもあるので、間違いないかチェックしてくださいね。

文字や記号など、入ってないか確認

おかしな場所に、文字や記号など入ると、HTMLタグの装飾したい場所を示すCSSの指定が成立しなくなったり、他の装飾に影響してスタイルの反映の仕方が、おかしなくなるパターンもあるんです。

• セレクタ・プロパティ・値の前後やナカに文字が入っていると完全アウト！
• CSSが全く効かない例：あh2 { font-size: 22px; }
• 装飾がおかしくなる例：h2 { foあnt-size: 22pxあ; }

おかしな文字が入ってないかをみて、CSSの構文通りになってるか確認してください。

CSSを指定の文字が間違っている。

スタイルシートを触って編集したとき、まちがって一文字 消してしまっても同じで、その部分は反映しません。

装飾したい場所を指定するセレクタが消えたら、その装飾は全部反映せず、CSSサイドからみたら、おかしな構文・おかしな文字。って事でブログの表示が崩れるってか、変になります。

プロパティや値のツヅリを間違っても反映しませんねっ。1が正解。2は反映しない。だって…ツヅリが違ってｒ(´・ω:;….::;.:. :::;..

1. font-size: 22px;
2. font-saiz: 22py;

指定した文字も、指定先も間違っていれば反映されません。

これら。ちいさな間違いや凡ミスでCSSが反映しない場合を紹介しました。

キャッシュを削除したのに、まだ反映しない原因

ブラウザのキャッシュを削除して、上記を確認しても反映しない原因は、プラグイン・サーバーで使用している『キャッシュ』が原因です。

キャッシュはブラウザだけではなく、使用しているプラグイン側やサーバーで古い情報を表示している場合があるので、プラグイン・サーバーのキャッシュを削除するなど対応してくださいね＾＾

※表示スピードを考慮したプラグインを入れているなら、チェックしてくださいね＾＾

まとめ

コメントアウトやCSSの構文などの間違いは、間違った場所などによっては、表示がイキナリおかしくなります。それらの原因のザックリした解消法は下記のとおり。

• コードなど、半角で書かれているか
  • コメントの開始と終了が間違ってないか
  • CSSの{:;}マークが抜けてないか
  • 間違った構文になってないか
  • 変な文字が入りこんでないか
  • コードの一部が消えてないか、など

CSSの構文が間違ってるときは上述したLINKW3C CSS 検証サービス、間違いを教えてくれるオススメです！※ベンダープレフィックスが付いててもオカシイ。と言われますが、W3Cの規格にあってないって事だったり、色々あるので割愛します。

これと初めにお話ししたリンク先の確認。

• HTMLの指定方法や、セレクタの指定間違い
• メディアクエリ内など違った場所に書いてないか
• CSSの優先順位
• キャッシュの削除
• スマホやPCのみに反映するメディアクエリの中に書いてないか
  • 具体的なコードは、見出し5書いてる場所が違ってるときの解決方法。に書いてます＾＾
• ブラウザだけでなく、プラグインやサーバーのキャッシュも削除

またCSSの読み込み順で、head内にあるlinkタグの順番が親テーマと子テーマが逆になってたら、どんなに書いても子テーマに、ほぼ反映されなかったりもします。

これを確認すれば、99.9％以上は反映します！

 

さいごに

数えきれないほどCSSが反映されない原因があるなか、冒頭からまとめ直前までのパターンが濃厚ですね。

どうしても分からないときは、ツイッターやFBで困ったよぉ＞＜。。って言ったら、それを見つけた優しい人が手伝ってくれるかもしれません。

今より初心者の頃、これがわからず時間ばかりを費やしてしまったので、これらを確認すればかなり時短になるはずです❦

これでうまく直って舞い上がりたい気分のとき、シェアで教えてもらえたら、一緒に喜び舞いあがって喜びますよぉ～。まだその気持ちは分かるはず！？ですからぁ＾＾

それでは、かうたっくでした。