Wit Mania(Webデザイン:::The Principle of CSS basis):::

The Principle of CSS basis

ブラウザの表示問題を解決するCSSハックとは

ユーザーの使っているブラウザは千差万別。CSSを使うとき、もっとも多いのがブラウザごとの表示の違いだろう。ここでは、トラブルの回避するための裏ワザ(CSSハック)などについて探っていこう。

二段階に振り分けるバージョン4世代への対応

CSSでWebページをデザインするとき、必ずつきまとってくるのが対応ブラウザの問題だ。ユーザーは、つねに最新ブラウザを使ってくれているとは限らない。なかでも、CSSに十分な対応ができていないバージョン4世代と5世代のブラウザをどう扱うかという部分で、制作者は頭を悩ますことになる。バージョン5世代のブラウザであれば、裏技(CSSハック)などを駆使して何とか問題が内容に表示させられることもあるが、バージョン4世代のブラウザに関しては、裏ワザを使っても解決できない問題が山ほど発生してしまう。それだけでなく、場合によってはアプリケーションがフリーズしたり、強制終了してしまうことさえあるのだ。そのためバージョン4世代のブラウザには、外部CSSファイルを一切読み込まないようにしておくのが、最も現実的な対処法だといえるだろう。

まずはバージョン4世代のブラウザについて。IE4とNN4、両方のブラウザだけ外部CSSファイルを読み込ませないようにしたいなら、CSSの@import命令を使って外部CSSファイルを指定すればよい。このとき、「url( )」を使った「@import url("○○○.css")」ではIE4が外部CSSファイルを読み込んでしまう。必ず「@import url("○○○.css")」と指定する必要がある点に注意したい。

ただし、NN4の初期のバージョン(4.01など)では、CSSの@import命令が実行されるとブラウザがフリーズすることが確認されている。それを避けるためには、link要素やstyle要素のmedia属性の値に「screen」とは一致しない値(「all」や「screen.tv」など)を指定して、先にNN4をはじいておく必要がある。

link要素のmedia属性でNN4を先にはじいたあと、さらにCSSの@import命令でIE4をはじく方法

バージョン5世代への対策は別ファイルで

次に、バージョン5世代のブラウザの問題を解決する方法を紹介しよう。これまでに様々なハックが編み出されてきているが、現在の傾向としてはソースコードのあちらこちらにハックを埋め込むような使い方はできるだけ避け、可能な限りソースコードをクリーンな状態に保つようになってきている。そのため、比較的修正箇所が多くなるバージョン5世代のブラウザの問題修正向けソースについては、専用の外部スタイルシートを用意して、そこにまとめて封じ込めてしまうという使い方が今後の主流となりそうだ。つまり、基本となるスタイルシートの後に、ハックを駆使してIE5.5だけが読み込む外部スタイルシート、Machintosh版IE5.xだけが読み込む外部スタイルシート、というようなにバグ修正専用の外部CSSファイルを用意。問題があれば、その中で上書き指定して修正するという方法だ。

これなら、基本となるスタイルシート上でバージョン5世代のブラウザの問題を修正するための複雑なハックを組み込む必要はなくなり、ベースとなるCSSをほぼクリーンな状態に維持することができる。しかも、バージョン5世代対策のハックを専用の外部CSSファイルに封じ込めることによって他のブラウザに影響を与えることがなくなるため、他のバージョンも含めた表示テストを何度も行う手間が省けることにもなる。

特定の種類・バージョンのブラウザだけが外部CSSファイルを読み込むようにするための代表的なハック。これらを利用して、ベースとなるCSSファイルのあとにバグ修正専用のCSSファイルを読み込ませ、問題を上書き修正する。

現実的にはIE6.0への対策も必要

CSSで大きな問題となるバージョン4世代と5世代のブラウザ対策は、これまで説明してきた方法ではほぼ解決されるが、現実的にはバージョン6世代以降のブラウザで問題が発生することも少なくない。その中でも、最も多く問題が発生するのは、おそらくIE6.0だろう。IE6.0対策としては、CSSをIE6.0だけに指定する方法と、IE6.0以外のブラウザにだけ適用する方法の二つに大きく分けられる。

まずIE6.0だけに適用したい場合、セレクタの先頭に「*html」をつける方法がいちばん簡単だろう。つまり、「何かの要素に含まれるhtml要素にさらに含まれる…」という子孫セレクタをセレクタの先頭に加えるわけだ。html要素は最上位の要素なので、他の要素に含まれることはあり得ない。そのため、本来ならそのCSSは無視されることになるのだが、Windows版IE5.0〜6.0とMachintosh版IE5.xは、これを普通に適用してしまう。次にIE6.0以外のブラウザにだけ適用したい場合には、単純にIE6.0が対応していない子セレクタや属性セレクタを使うだけでよい。たとえば、セレクタの先頭に子セレクタを使って「html > body」と付けるだけで、Windows版IEにはいっさい適用されなくなる。

たった1行で解決できる「ホーリー・ハック」

上気した方法のほかにも、IE6.0が起こす特定の問題を修正するための一般的なハックがある。これは「ホーリー・ハック」と呼ばれるもので、IE6.0の配置に関連する問題をほとんどなんでも解決してくれるすばらしいハックだ。具体的な指定方法は下図のソースコードで示したとおりだが、このハックの重要な部分は「height:1%;」という部分。実のところIEの配置に関連する問題の多くは、該当するボックス、またはそれを含むボックスの幅、高さを設定してやることで解決する。したがって、たとえば「width:100%;」などを指定するだけでも問題を解決してくれるのだ。

IE6.0対策に利用できる代表的なハック。どちらもセレクタの最初に付けて使う。

IE6.0の配置に関連する多くの問題を解決できる「ホーリー・ハック」。問題が発生しているボックス、またはそれを含むボックスを「セレクタ」に指定して「height:1%;」を適用するだけだ。1行目と3行目のコメントは、2行目をMachintosh版IE5に適用しないための裏ワザになっている。

さまざまなCSSハックを紹介しているサイト
「CSS Filters」

http://centricle.com/ref/css/filters/

Web制作を手助けしてくれるCSSツールガイド

CSSの作成は基本的にテキストエディタで作業することになるが、プロパティを全部覚えきるのは大変だし、毎回同じ単語を入力していてはいつかスペルミスを起こしてしまうだろう。CSSの作成に特化したソフトを使えば、これらの凡ミスを極力抑えられ、作業効率を大幅に向上することができる。ここでは気軽に導入できるフリー&シェアウエアを紹介しておこう。

シェアウェア:1050円(税込)
作者:MQ DigitalCraft
http://homepage2.nifty.com/digitalcraft/
raicho/index.html

らいてふスタイルシート・アシスタント

Windows 98/Me/XPに対応したCSS/HTMLエディタ。ウィザード形式でサンプルプレビューを確認しながら、簡単にCSSを作成できる。またポップアップリストの入力支援によって、だれでもが簡単に使いこなせるHTMLエディタとしても利用可能。

フリーウェア
作者:Bradbury Software. LLC
http://www.topstyle4.com/

Topstyle Lite

Windows XP対応の定番CSS作成ソフト。スタイルをプルダウンメニューから選ぶだけの簡単操作と、ターゲットブラウザを設定して適正なCSSを作成できる点が特徴。英語ソフトではあるが、Vectorなどから日本語化パッチを入手することもできる。

Lunar

Windows 98/NT4.0/2000/XPに対応したCSSエディタ。標準的なブラウザ(IE5.5、NN4.7、NN6)の対応状況を確認しながらCSSを生成可能。W3Cに規定されたほとんどのスタイルをサポート。サンプルプレビューを確認しながらCSSを簡単に生成できる。

Auto Style

Windows 98/Me/2000/XPに対応したCSSエディタ。マウスクリックだけの簡単操作でほとんどのCSSを作成できるビギナー向けツール。また各種フィルターなどIE向けの視覚効果にも対応。実行にはVB60のランタイムバージョンが必要だ。

フリーウェア

作者:上山大輔/御影紫苑
http://www.mimikaki.net/

ミミカキエディットHTML4.0+cssモード

Machintosh用の人気エディタ「mi」(ミミカキエディット)と、mi上へインポート可能なHTMLおよびCSSコーディング専用モードのセット。使い慣れたエディタでCSS作成の環境をつくれる。miでは他にもXHTMLモードやphpモードなど、さまざまな入力モードが利用できる。


Copyright© 1998-2007. Wit Mania, all Rights Reserved. /// Last Update: 2010-11-13