Blog

※ブログ移転しました。 → hamashun.me

CSSの不具合に対するチェック4項目 おまけ付き

CSSレイアウトが崩れている時に試す10の処方箋::::::STOPN' LISTEN::::::to the silence:::::::が非常に便利だと感じたので、Shun流の処方箋もメモしてみます。
・・・・・・とか言っておきながら、STOPN' LISTENさんと重複している箇所もあったり。

1:バリデータに通す

まずは基本。 The W3C Markup Validation ServiceW3C CSS 検証サービスの両方がValidかどうかを確認します。

2:borderやbacground-colorを付ける

あやしい部分にこれらを与える事で、視覚的に問題の場所と範囲を把握する事ができます。
1px単位のシビアなコントロールを求められる時は、background-colorの方が無難かもしれません。

3:原因のソースを探す

2によってあやしい部分が特定できました。
そこで、問題に関連しているソースを(試しに)削除して、どこが原因かを調べます。
削除する範囲は、可能な限り絞り込んでいきます。

ここで考えるのはHTML側とCSS側、どちらを削除するかという事。
状況や好みによって答えは異なると思いますが、僕はCSS側を削除する事が多いです。
その方が画面上に情報が残るので、見た目で分かりやすいと感じます。
マークアップのせいでレイアウトが崩れる、という経験は余りないような気も。

4:問題が起きているブラウザを特定する

モダンブラウザで(も)起きているなら、大抵の場合は製作者のミスやちょっとした工夫で直る事が多いようです。 記述を見直してみませう。
古いブラウザで起きているなら、バグなどの可能性があります。CSSバグリスト@CSSバグ辞典スレッド【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (MYCOMジャーナル)などをチェックしてみましょう。

ちなみに、MacIE5は子セレクタと兄弟セレクタに対応しています。
WinIE6以下とモダンブラウザの振り分けで使用する際には、注意が必要です。
この辺りもMacIEがツンデレたる所以(どうでもいい)。

おまけ

修正の為にはソースを書き換えたり、書き加えたりすると思います。
すぐに修正できれば良いんですが、煮詰まってきてしまうとどれが手を加えたソースか分からなくなる事があります。
そのような状況にならないように、後から加えたソースにはインデントを増やしておいたり、コメントを残しておいたりすると良いと思います。

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive