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

シェアする

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

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

キャッシュとシークレットモードの説明は下記リンク先に書いてます。

LINKカスタマイズ時キャッシュの削除よりワンクリでシークレットモード!Chrome拡張機能「Incognito This!」

  1. スマホやPCのみに反映するメディアクエリの中に書いてないか
  2. セレクタの指定方法が間違ってないか
  3. CSSの優先順位が低いからではないか

他CSSが反映されないとき、意外な落とし穴がコメントアウト。あとCSSの構文があってない。もう1つはさいごに書いてるので、順番に説明を見てみましょう^^

原因を確認してCSSを反映させよう:タマゴのデコレーション

スポンサーリンク

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

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

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

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

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

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

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

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

コメントアウト後、10行目で途切れてる

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

コメントアウト前のCSSで比較

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

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

コメントの閉じ忘れで下のCSSが消えた例

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

h2・3・4・5・6タグまでのスタイルが消えた例え

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

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

コメントの閉じ間違い

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

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

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

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

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

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

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

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

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

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

テキストエディタAtom

テキストエディタAtomのコメントアウト例

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

LINKTeraPadのダウンロード

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

TeraPadコメントアウトの色付け操作画面

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

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

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

Chrome要素の検証画面の説明

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

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

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

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

<h2>h2タグに囲まれた、このフォントサイズは、22pxになる</h2>

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

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

HTMLとCSSはセットで見るとわかりやすいので、HTMLとは?から書いたCSSのセレクタを説明したページを、分かりにくい場合どうぞ。

LINK初心者向け、HTMLの入門編!HTMLタグとCSSのセレクタの関係&要素とは?

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

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

ポイント

それを消しちゃった場所によっては、強烈にブログの装飾が大きくかわってきます。セレクタを反映させる為のCSSの宣言である半角カッコが外れてないかをチェックしてください。

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

さいごの1つは、サーバー側のキャッシュではないでしょうか。

LINKCSSで書いたコードが突然反映しなくなった原因は、サーバー側のキャッシュ・ほか思い当たること

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

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

さいごに

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

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

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

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

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

トップへ戻る