もっと場当たり的にCSSを直す方法
前のエントリーを見て思ったのですが、なんとなく筋道立てて書こうとしているところが言い訳臭くてダメですね。
そういう訳で、本当に場当たり的に、後のメンテナンスのことなど考えずに、今ここにある問題をしのぐためにCSSを直す方法を書いてみました。
問題箇所をすべて洗い出す。
校正部門とかチェッカーのバイト君とか後輩を泣かせて、各種ブラウザと画面解像度、その他必要な条件での表示確認を行います。
自分で確認すると、今まで見慣れているページなのでどうしても見落とす箇所がありますし、なにより大変なので、できるだけ理由を付けて人にやらせましょう。
問題箇所はバグ対応システムか表に記入してもらい、あとで修正漏れや見落としがないようにします。
人間自分が楽をするのが一番です。
cssファイルをすべて印刷する
cssをページの要素やブラウザごとにモジュール化している場合、非常に見通しが悪くなっていますので、まずは全部印刷し、机に広げて眺めてみます。
そして、適当にあたりを付けて修正しなければいけない箇所をピックします。
インデントのずれやコメントの記述漏れなどに目が行ってしまいますが、今回は場当たり的な対処療法なので見なかったことにします。
とりあえず枠で囲う
下記のユニバーサルセレクタを追加
*
{
border:solid 1px #f00;
}この状態で、意図せずに枠からはみ出ているブロックがある、枠が表示されない、ブロックの形が意図しているものと違うなどの問題があった場合、そこのクラスやIDのスタイル指定に問題があります。
本当は別の場所に問題がある場合も多々ありますが、ここでは「木を見て森を見ず」方法で進めます。
とりあえず絶対配置にしてみる
floatで悩む問題はこれですべて解決します。他にいろいろ問題が出てくる場合も多々ありますが気にしません。
とりあえずブロック要素を増やしてみる
子要素が親要素を突き抜けたり、marginやpaddingが意図したとおりに表示されない場合は、divタグなどでネストを増やして様子を見ます。それでもだめならもう一重。
度が過ぎるといわゆるdiv厨という奴になりますが気にしません。
あきらめてテーブルレイアウトにする
(表層的には)クライアントの望むものは、構造化された文章のwebページではなく、PCのブラウザでレイアウトが崩れないwebページです。
と、自分に言い聞かせてテーブルレイアウトを取り入れましょう。
フルCSSスタイルの過渡期の頃に言われていた「ハイブリッド型」というスタイルです。
再確認
すべて修正が終わったら、また校正部門かチェッカーのバイト君か後輩を泣かせて確認を行います。
校正の人って、仕事が細かくて地味で神経を使うのに色々文句を言われて大変ですよね…。