デザイナー視点での CSS レイアウト普及の歴史

デザイナー視点での CSS レイアウト普及の歴史

今ではどこの制作会社でも当たり前のように導入している XHTML + CSS でのコーディングですが、ここまで普及するまでにはブラウザの普及との関係が密接でした。

CSS レイアウトの普及については WEB 標準の観点から「理念」をベースに語られることが多いので、今回は現場のデザイナー視点で歴史を振り返りたいと思います。

Netscape4.7

今から 5~6 年前までは、Windows の Netscape4.7 が対象ブラウザに含まれるケースが多くありました。
当時の世の中のメインブラウザだった Internet Explorer(以下 IE) のバージョンは 5 かもしくは 5.5 でしたが、IE と Netscape4.7 では CSS の実装や解釈がまるで違うという問題がありました。

そのため、クライアントの要求するデザイン・クオリティを実現しようとなると、とても CSS でコーディングできたものではありませんでした。
その後、Netscape がバージョンを一気に 6 までアップデートしたことで、徐々にシェアが落ちてきた Netscape4.7 は対象ブラウザに含まれない、もしくは CSS を適用しなくてよい、という時代の流れになりました。

Mac IE5

アップルが OSX をリリースする以前の OS8 や OS9 の頃は、IE をメインブラウザとして利用している Mac ユーザが大勢いました。
Mac 版の IE5 は Windows 版の IE5 とはまったく異なるエンジンになっており、また時代を先取りしすぎていたので CSS の実装は当時としては最先端でしたが、解釈が非常にシビアでした。バグが多かったのも致命的です。

そのため、Mac IE5 を対象ブラウザに含む場合は Mac IE5 用の CSS を別に用意するのが一般的でした。
しかしこれが非常に手間でした。2 度手間もありますが、Mac IE5 は CSS の解釈がとにかくシビアだったので、きちんとレイアウトを表示させるまでに地獄のようなトライ&エラーを繰り返す必要がありました。

現在では Mac IE5 対策の CSS ハック情報がネット上で共有され、以前ほど苦労することはなくなりました。
また、Mac OSX が普及したことによりモダンではなくなった Mac IE5 は対象ブラウザに含まなくてもよいという案件が増えています。

Windows IE5、IE5.5

Windows 版の IE5 は CSS のボックスモデルを間違って解釈するという致命的なバグがあります。
そのため、CSS でレイアウトする際に IE5 のバグに気をつけながらコーディングする必要がありました。XHTML に無駄な div タグや span タグが多用されたり、CSS の中がハックだらけ、というコードが多く見受けられました。また、このボックスモデルのバグのためにレイアウトに制限があったのも事実です。

現在では Windows XP がヒットしたことで多くの人が IE6 に乗り換えたことにより、IE5 が対象ブラウザに含まれることはほとんどなくなりました。

そして現在

過去のレガシーなブラウザをデザイン・レイアウトの対象外にすることで、CSS を導入しやすくなりました。
現在ではレイアウトの制限も減り、テーブルでレイアウトするよりも CSS でレイアウトしたほうが全然楽ちんだったりします。

過去を切り捨てることで前へ進む、というポジティブな流れを感じます。次に対象外になるのは IE6 かなー?
IE6 が対象外になれば、さらに CSS を導入しやすくなりますね。

また、忘れてはならない大事なことは、「WEB 標準」の認知拡大による一般的なクライアントの価値感の変化です。

数年前までは、「どんなブラウザでも同じレイアウトで表示する」ことを義務付けられている風潮がありました。(それをユーザビリティだと誤認識されていたのだと思います)

現在では、「どんなブラウザでも情報の閲覧に支障がないようにする」という正しい認識が広まりました。
そのため HTML を正しい文書構造で記述する! ということが最優先事項となり、コーダにとっては幸せな世の中になったと思います。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ