CSSは正しいのに変更後レイアウトが崩れる場合、ソースコードのインデント（字下げ）をチェックする

ブログサイトの見た目をカスタマイズしていました。CSSに正しく貼り付けたはずなのにレイアウトが崩れました。レイアウトが崩れる原因をネットで検索してすべて試しましたが、原因はわかりませんでした。

そこでCSSを変更する前のデータと変更後のデータを比較して、何が悪いのか自分で調べて＜悪さをしている部分＞を発見しました。結果としてはソースコードをインデント（字下げ）しているスペース部分に問題がありました。

今回の原因は【私のようなCSSをコピペしてブログサイトを運営している初心者】によくありそうなパターンだったので対処法を記事に残すことにしました。CSSが反映されないorレイアウトが崩れる原因が、基本的なミスなのであまり触れられない内容だったので、WordPressを始めたばかりの方に参考になれば幸いです。

カスタマイズするルールについて

サイトをCSS等でカスタマイズをするときは必ずバックアップをしてください。
どんな些細なことでも絶対にバックアップをしてください。
たとえ１文字だけ入力するときでも、絶対大丈夫だと確信していたとしてもバックアップは重要です。

私もまさかと思いました。もし今回変更する前のCSSのデータがなかったら、二度と元に戻せませんでした。今回私が遭遇したトラブルは見た目では全くわかりませんでした。改めてCSSでのカスタマイズの難しさを学びました。

では、前置きはここまでにして本題について説明します。

CSSにコメントアウトを書き込んだら崩れた

CSSをあとで見返したときにわかりやすくするためコメントアウトを書き込んでいました。追加CSSの部分にコメントアウトを書き込み、更新したらレイアウトが崩れました。

CSSに　/**/　と囲んだ部分に文字を入力してもデザインには反映されないので、崩れるわけがないので原因がわかりませんでした。

もちろんネットで検索して原因を探しました。よくある検索でよく紹介されている原因は

• 「．」セミコロンの付け忘れ
• スペースおよび文字が全角になってる
• キャッシュが原因また反映に時間がかかっているだけ
• 優先度の問題

だいたいこんな感じですが、どれも検討しましたが原因はわかりませんでした。

実際に崩れた症状は以下のような具合です。
です。見出しや文字のカラーが反映されなくなりました。

CSSのプログラムには一切変更していません。コメントアウトに文字を書き込んでいただけです。

変更前と変更後のCSSを比較検討する

原因を探す方法は変更前と変更後のCSSを比較しました。
CSSは正しく完全に一致しているので原因がわかりません。

とりあえず変更する前にテキストに貼り付けておきました。
全く同じなので焦りました。コメントアウト部分以外はもちろん半角です。

今度はコードエディターに貼り付けてみました。

一字一句完全に一致しています。

しかし、変更前のCSSを貼り付けるとレイアウトは正しく表示されるので、原因は変更後のCSSにあるのは確かでした。

一行づつ貼り付けて、どこでレイアウトが崩れているのか探します。

レイアウトが崩れる原因はインデント部分

問題の箇所はこの２行でした。この箇所を貼り付けるとレイアウトが崩れます。

改めてコードエディターで確認しますが、やっぱりわかりません。

＜color＞と＜background>の前のスペース部分を入れ替えるとレイアウトが改善することがわかりました。

テキストエディターとAtomエディターではわかりませんでしたが、プラグインのエディターでみると少し違うのがわかります。

この結果を参考に、
ｘ（ＮＧ）の方の＜color＞の前のスペースを半角で打ち直してみたら、レイアウトが直りました。

レイアウトが反映されないor崩れる原因は
CSSをコピペした際にインデント（字下げ）している部分がおかしくなってしまった
ことのようでした。

CSSのコーディング方法と基礎の重要性

HTMLやCSSのコーディング方法で、インデントするときは
タブやスペースを混合して使用しない。インデントには半角スペース2個を使用する。
というのがこの業界のルールのようです。

私のようにHTMLやCSSをコピペしてブログサイトを運用していると、間違いを起こしやすいです。またCSSでレイアウトが崩れてしまった場合、何も原因が考えられないときはCSSのインデント部分を改めて半角スペースで打ち直す必要が発生してしまうのでめんどうです。

WordPress初心者は本などで調べてHTMLやCSSをコーディングする基礎について改めて勉強することが重要です。ネットの情報で不具合の原因を調べても、基礎中の基礎の部分は省略されていることが多いです。当たり前で基礎的な部分でCSSが反映されない場合、いくら調べてもなかなか原因は見つかりません。

わかりやすく例えるならば、
車を運転するときにエンジンがかからない不具合が発生した場合、原因をネットで調べると
様々な情報を見つけることができますが、
エンジンがかからない原因が＜カギを刺しただけで回してなかったから＞という超簡単なことだったら、ネットで検索して見つけることは非常に困難です。
誰もそんな基礎中の基礎な内容を記事にしませんよね。今回の不具合のレベルはそのくらい簡単なことでした。

遠回りかもしれませんが、まずは基礎を勉強することが重要です。
この業界の常識がわかっていないと、不具合の原因を見つけることも困難になります。
私もまた１から勉強しようと思いました。

参考になれば幸いです。