コーディングが上手くいかないときは...

• 文字サイズを縮小
• 文字サイズを拡大
• 元の文字サイズに戻す

1. スタッフブログ
2. 業界ブログ
3. 業界ポッド？

コーディング作業をしていると、「あれ？なんで上手くいかないの？」とHTMLやCSSの設定が上手くいかないときが多々あります。
一つ一つソースを解読して、どこが間違っているのか探していくのですが、なかなかすんなりとは発見できないものです。
XHTML+CSS(+Javascript)では、それぞれ複雑に影響し合っているので、単に「表示がおかしい」といっても、
HTML側に問題があるのか、はなまたCSSかJavascriptかと、とにかく問題箇所の発見が難しいです。


私が作業中にこういう場面に出くわしたときは、こういう対処方法で乗り切っています。


(1).おかしな部分を一時消してみる。

おかしな部分に当たりを付けて、一時コメントアウトしておきます。
そうすると、もしコメントアウトした中に問題の箇所があるなら、表示は一度正常に戻るはずです。
サイト全体に関わるレイアウトを調整しているとき(特にfloat、positionなんかが怪しいです)は、
この方法は結構有効です。
コメントアウトした中に問題の箇所がありそうなら、コメントアウトする範囲を狭めて問題箇所を絞り込みます。
最終的に残った部分が問題箇所である可能性が大きいので、この部分を重点的に調べます。


(2).バックグラウンドに背景色を入れてみる。

これもレイアウト系のソースを調整するときに起こりがちですが、予期せぬmarginやpaddingでfloatのカラム落ちが発生したり、
ブラウザの表示バグによって思った表示にならないときは、そのブロック要素に背景色を指定してみるのも良いと思います。
こうすることで、このブロック要素の範囲を明確にすることができますので、問題解決の糸口をつかみやすいです。
背景色は、＃FF00FFとか＃00FF00とかドギツイ色が判別しやすいですよ。


(3)やり直し...てみる

どうやっても上手くいかないときもあります。
簡単な見落としに気づけなかったり、普段は間違えないようなCSSの指定ミスなど、まるで催眠術にかかったみたいに、
問題を解決できないときがあるんです。(これは私だけかもしれませんが。)
そんなときは、おかしくなっている部分を丸ごと削除して作り直します。
なんだか無茶苦茶な気もしますが、一度作ったHTMLとCSSを再度作り直すのは、以外と時間はかかりません。
問題箇所を発見できなくて、何時間もロスするくらいなら、新たに作り直した方が早いことがあります。


最近では、(3)をすることは少なくなりましたが、(1)(2)は日常的にやっています。
特に(2)は作成上ブロック要素を判別しやすくするため、取り立てて問題箇所が無くても行っています。
デバッグの方法は個々人でやりやすい方法があると思いますが、XHTML+CSS初心者の方には試して損はない方法だと思いますよ。