SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

クロスブラウザなレイアウトデザインテクニック

CSSハックで、クロスブラウザ対応のCSSを記述する

クロスブラウザなレイアウトデザインテクニック 第2回


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

特定ブラウザ専用の外部スタイルシート

 CSSのサポートが不十分なバージョン3-4世代のブラウザに対しては、CSSを適用しない、という方法を取りましたが、比較的新しいバージョン5以降のブラウザに対しては、特定ブラウザ専用のスタイルシートで対応するのが良いでしょう。1つのCSSファイルだけで、あらゆるブラウザの見栄えを制御しようとすると、スタイルを修正した際、あらゆるブラウザで動作確認をする必要が出てきて面倒です。例えば、Win IE 6専用のスタイルシートを用意しておけば、その中のスタイルを変更した場合、Win IE 6の表示確認をするだけで済みます。

 仕組みとしては、まず、正しい解釈をする基本のスタイルシートを読み込ませた上で、正しく解釈できない部分を特定ブラウザ専用のスタイルシートで上書きする形になります。この順番を間違えると、正しい解釈をする基本のスタイルシートで上書きしてしまい、意図した結果を得ることができなくなりますので注意してください。

パスフィルタ

 特定のブラウザにのみ専用の外部スタイルシートを読み込ませるものとして、「パスフィルタ(pass fillters)」と呼ばれるテクニックがあります。

 前章では、Holly Hackを利用してCSSの適用対象からMac IE 5を排除する方法を紹介しました。Mac IE5で表示確認のできる環境の場合には、Mac IE5をCSSの適用対象とし、外部スタイルシートを用いて表示問題に対応するのも良いでしょう。

 下記のサンプルコードは、Holly Hackの仕組みを応用したもので、Mac IE5にのみ外部スタイルシート「mac_ie5.css」を読み込ませるパスフィルタです。

CSSソース:Mac IE 5用パスフィルタ
/*/*\*//*/
@import "mac_ie5.css";
/**/

 以下、主なパスフィルタのサンプルコードとなります。

CSSソース:Win IE 5用パスフィルタ
@media tty{
i{content : "\";/*" "*/}}; @import 'win_ie5.css'; {;}/*";}
}/* */
CSSソース:Win IE 5.5用パスフィルタ
@media tty{
i{content : "\";/*" "*/}}@m; @import 'win_ie55.css'; /*";}
}/* */
CSSソース:Win IE 5-5.5用パスフィルタ
@media tty{
i{content : "\";/*" "*/}}@m; @import 'win_ie5_55.css'; /*";}
}/* */
CSSソース:モダンブラウザ(Win IE 6、Mac IE 5、Mozila、Firefox、Opera 6-8、Netscape 6-8、Safariなど)用パスフィルタ
@import "null?\"\{";
@import "modern.css";
@import "null?\"\}";

条件分岐コメントによるバージョンの振り分け

 Win IEのバージョン6以下は、CSSサポートの面で問題の多いブラウザでしたが、新バージョンのWin IE 7では、多くの問題が改善されWeb標準により準拠したものとなりました。

 これまで、Win IE 5-6に対して、バージョンの区別をせずに一括してCSSハックを利用する例も多くあったのですが、そのようなWebページに、Win IE 7でアクセスすると、表示が崩れてしまう(それは、本来の正しい解釈による表示)という問題が起こることがあります。

 ブラウザをバージョンごとに振り分ける方法としては、前項のパスフィルタを使用するほか、JavaScriptやサーバサイドプログラムを使用するという方法が一般的ですが、Win IEのバージョン5以上に限っては、「条件分岐コメント(Conditional comments)」というものを使用することで、(X)HTML文書内で簡単にこれを制御することができます。

 条件分岐コメントは、IE独自の仕様ということで懸念する声もあるようですが、CSSハックを使用せずともバージョンの振り分けができ、あくまでコメントとしての記述であるため、妥当な(Valid)ものとしてバリデーターに通るというメリットがあります。(X)HTML内に振り分けのためのコメント記述が増えるとはいえ、他のブラウザに影響せず、バリデータに通るというのは、使用時の言い訳としては最適です。また、保守性の面でCSSハックのためのIE専用の外部スタイルシートを別ファイルで管理できるというのも魅力的です。

 懸念される声というのは、IEの独自仕様である(Web標準上正式な利用が許可されているわけではない)という点や、CSSの実装不備を(X)HTMLで制御するという点でしょうか。ちなみに、IE開発チームは、「IEBlogのCall to action: The demise of CSS hacks and broken pages」の中で、CSSハックを使用するよりも条件分岐コメントを使用することを推奨していますから、将来的に条件分岐コメントが使えなくなるような問題はないとみて良いでしょう。

条件分岐コメントの書式

 条件分岐コメントの基本的な書式は、指定バージョン、指定バージョン以上、指定バージョン未満に分かれます。それぞれ次のように書きます。

指定バージョンのみ
<!--[if IE 指定バージョン]>内容<![endif]-->
指定バージョン以上
<!--[if gte IE 指定バージョン]>内容<![endif]-->
指定バージョン未満
<!--[if lt IE 指定バージョン]>内容<![endif]-->

 また、指定バージョンの記述にもルールがあります。適当に記述しても認識されない場合があるので注意してください。

条件分岐コメントの指定バージョンの記述
指定バージョンのみ IE 5.0 IE 5.5 IE 6.0
<!--[if IE 5.0]>内容<![endif]-->    
<!--[if IE 5.5000]>内容<![endif]-->    
<!--[if IE 6.0]>内容<![endif]-->    
指定バージョン以上 IE5.0 IE5.5 IE6.0
<!--[if gte IE 5.0]>内容<![endif]-->
<!--[if gte IE 5.5000]>内容<![endif]-->  
<!--[if gte IE 6.0]>内容<![endif]-->    
指定バージョン以下 IE5.0 IE5.5 IE6.0
<!--[if lt IE 5.0]>内容<![endif]-->    
<!--[if lt IE 5.5000]>内容<![endif]-->  
<!--[if lt IE 6.0]>内容<![endif]-->

 次のサンプルコードでは、Win IE 5にのみ、外部スタイルシートを読み込ませるよう指定しています。もちろん、他のバージョンを含むブラウザでは、コメントとして扱われるため、ここで指定した外部スタイルシート(win_ie5.css)は読み込まれません。

Win IE 5のみ外部スタイルシート(win_ie5.css)を読み込ませる
<!--[if IE 5.0]> <link rel="stylesheet" type="text/css" href="win_ie5.css"  /> <![endif]-->

 なお、条件分岐コメントは、利用をスタイルシートに限ったものではありませんので、例えば、IEにのみJavaScriptを読ませたり、IEでのみ表示されるメッセージを作ったりすることも可能です。条件分岐コメントについてのより詳しい情報は、「About Conditional Comments」を参照してください。

次のページ
ボックスモデルの解釈の違いに対応する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
クロスブラウザなレイアウトデザインテクニック連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2780 2009/06/22 18:38

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング