納期間近でIEで崩れてる！そんな時にも慌てないCSS開発のワークフロー

サイト構築 -CSS

Post on:2012年2月2日

1. リセットかノーマライズか

IE, Firefox, Chrome, Safari, Operaなどのブラウザには各要素ごとのデフォルトのスタイルが用意されており、制作する際にはこれらの相違を見出し、各要素を整える必要があります。

CSSリセットとは

CSSリセットは全ての要素をリセットするもので、一番有名なものはEric MeyerのCSS Resetで、他にもHTML5用のHTML5 Doctorなどがあります。

CSSノーマライズとは

ノーマライズは有用なデフォルトのスタイルは維持し、各ブラウザごとの異なるスタイルやバグを修正するもので、Normalize CSSが有名です。

リセットとノーマライズの違いは、全てを定義しなおすか、有用なものは残すか、です。
乱暴な決め方ですが、全ての要素のmargin, paddingなどの値が「0」である必要があるかどうか考えてみてください。

2. 基本的なレイアウトはIEで

ウェブサイトのパフォーマンスとメンテナンスを考えた場合、最も悪いことは全部のデザインをコードし終えた後でIEの前のバージョンで確認することです。もし、あなたが制作するウェブサイトのユーザーがIEの前のバージョンで高いパーセンテージを持っているなら、なおさらです。
複雑な配置、ネガティブマージン、z-indexを使ったトリック、最新のレイアウトテクニックを加える前に、早い段階でIEであなたのレイアウトを確認してください。そして、ページ上の重要な要素が他のモダンブラウザでも同じように見えることを確認します。

もし、IEでレイアウトに問題を発見したら、開発の早い段階で対応します。IEでのレイアウトの注意点は主に下記のものが挙げられます。

余白にはmarginではなく、paddingを使用する。
floatの使いすぎに注意。
overflow: hiddenは背景が見えてもおかしくないように。

これらIEの対応は、おそらく余分なスタイルシートを含んでしまうでしょう。しかし、可能な限り早い段階でIEの対応をすることで、IEに特定されるCSSのほとんどすべての問題を避け、開発時間を短縮することができるでしょう。

[ad#ad-2]

3. 最後の確認もIEで

基本的なレイアウトがすべてのブラウザで機能することを確認したら、作りこみをします。画像をスライスしたり、CSS3を使ったり、パフォーマンスに影響を与えないよう実装し、そして最後にIEの前のバージョンで確認します。

この時点では問題は最小であるべきで、ほとんどの場合ハックや回避策を使用しないで修正するようにします。
この時点では、まだあなたのコードはきれいなはずです。IE用のコードもそんなに多くはないでしょう。

しかし、納期間近でクリティカルなIEでの不具合が見つかったらどうしまますか？

4. 最後の手段：IEのみスタイル

もし、プロジェクトの納期が近づき、あなたが最善の努力をおこなったにもかかわらず、IEで問題がある場合は、最低限のIE用のスタイルを加えます。

CSSハックや類似の回避策を使うことは、時間の制約がある場合は維持管理・更新のためにも賢明な手段になるでしょう。

参考：IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法

5. 問題に取り組み続ける

ウェブサイトは生き物なので、それを維持することとコードを保証することは可能な限り効率的です。もちろん、これは予算と時間の限界を超えるかもしれません。しかし時間の制約のためにIE用のスタイルシートを加えることは、標準的なコードを使って問題を修正するより良いアイデアかもしれません。

あなたはマークアップで配置を変更したり、スタイルシートの特定の部分を再考しなければならないかもしれません。しかし、もしあなたがIEのみのコードで避けることができるのであれば、CSSは可能な限りクリーンであることを保証するでしょう。
そして最も重要なことは、そのコードが必要ではないブラウザにコードを与えないため、パフォーマンスに影響を与えないことです。

6. おわりに

このワークフローは全ての人にあっているものではありません。もしユーザーの多くがIEではない時は、確かにこの方法は効率的ではありません。
しかし、IEユーザーもターゲットにするのであれば、このワークフローはあなたがIEのみのコードを使うのを潜在的に避けてきたのを手伝うことになるでしょう。また、古いブラウザで数々のCSSテクニックがどのように処理されるのか、ずっと深い理解を得るでしょう。