サイトを制作しているとき、ふとした時にページのデザインが崩れてしまうことがあります。
大抵の場合は「divタグ」が原因となるのですが、それ以外にも「タグの閉じ忘れ」や「空白」、「CSSの記述ミス」などがあります。
弊社の場合、それらのチェックをする際にはいくつかの方法を使います。
今回はそれらの方法を紹介したいと思います。
「Visual Studio」や「メモ帳」を使う
弊社がタグ漏れをチェックする際には「Visual Studio」や「メモ帳」を使うことが多いです。
正直どちらでもよいのですが、「Visual Studio」を使うことが多いと思います。
全部とはいいませんが、エラーがある場合には色を付けて表示してくれることがあるためです。
そもそもエラーが起こったときに、どのあたりで問題が発生しているかの検討がついていることが多いため、この方法でも問題ないのかもしれません。
なぜ見当がつくの？といわれると「経験」としか言いようがありません。
divが原因となることが多い 数を合わせる
大抵のデザイン崩れは「divタグ」が問題となっていることが多いです。
＜div＞ではじまり＜/div＞で終わるため、同じ数だけ使うことになります。
よってCtrl＋Fでそれぞれの数を検索します。
クラスが設定されていたりすることもあるため
「＜div」ではじまり「＜/div」あたりの少し文字を削った状態で検索してあげるとよいと思います。
手あたり次第チェックする方法
文章やソースが長い場合、なかなかエラー箇所が見つからないこともあります。
そんなときには、分割して問題個所を発見する方法もあります。
かなり地道な作業にはなってしまいます。
たとえば文章が1000行ほどあったとします。
その場合、3等分くらいにします。（何等分でもよいです）
そして部分的にページにアップしていきます。それによりどのパートをアップしたときにエラーが発生するのかをチェックします。
もしページ内に何も文章が入っていないのにエラーが起こっているようであれば、テンプレート（phpやCSS）が原因である可能性があります。
おそらくもっと良い方法があると思う
弊社でよく利用するチェック方法を紹介しました。
かなり原始的な方法であるとは思いますが、昔からのやり方であり慣れてしまっているということもあります
他に良い方法があるとは思うのですが、もしよい方法があるのなら教えていただければ幸いです。
