このページの本文へ

「CSS Nite ビギナーズ」から学ぶエッセンス

さらばテーブルレイアウト!CSSビギナーの濃い1日

2008年11月12日 19時16分更新

小橋川誠己/企画報道編集部

  • この記事をはてなブックマークに追加
本文印刷

“ローハック時代”のブラウザー間調整術

CSS Niteビギナーズ
サイバーガーデンの益子貴寛氏

 Internet Explorer(IE)/Firefox/Safari/Opera/Google Chrome……「新たなブラウザー戦争勃発」と言われるほどWebブラウザー間の競争が激化している。ブラウザーの“Web標準”への対応は以前に比べればだいぶ進んだとはいえ、表示差が残っているのには変わりない。サイバーガーデンの益子貴寛氏は「CSSデザインのブラウザ調整」と題して、クロスブラウザー対応のための手順を解説した。

 ブラウザー間の表示を調整するには、まず「ターゲットブラウザーを決めること」(益子氏)。当然だが、ターゲットを決めないことには調整もできない。ターゲットを決めたら、それに合うテスト環境を整える。マルチOS環境を作るには「Parallels Desktop」のような仮想化ソフトを使ってもいいし、古いIEのチェックには「IEtester」(関連記事)のようなエミュレーターも使える。では、どのブラウザーを基準にチェックしていけばいいか?

 益子氏は「CSSサポートのよいブラウザーをターゲットにするのが基本」と言う。「正しく書いたコードを正しく表示してくれるブラウザーで作業して、その後でCSSサポートの悪いブラウザーに合わせていく。最初からCSSサポートが悪いブラウザーを使うと無駄に時間を使ってしまう」。原状では、Firefoxをベースに作業を進める制作者が多いという。「Firebug」「Web Developer」のようなデバッグ用の機能拡張が充実しているのも、その理由だ。

CSS Niteビギナーズ
CSSハックの際にはCSSファイルを分割すると便利だ。削るのも足すのも楽になる

 古いIEなど、どうしても正しく表示されない場合には、“CSSハック”を使うことになる。CSSハックとはブラウザーのバグや解釈の違いを利用してブラウザー間の表示の差を埋める作業。たとえば、IE 6にだけ適用させたいCSSは「* html セレクタ {}」と書く、といった具合に特定の記述方法によって、狙ったブラウザーにだけ違うスタイルを適用させる。ハックを使う場合はCSSファイルを分割しておき、ブラウザーごとにハック用のファイルを読み込ませる。

 便利に聞こえるCSSハックだが、「安易なハックの多様は控えるべき」(益子氏)と言う。「CSSハックは一種の“薬”。たくさん飲んでも体質改善はしない。どうしても使わないといけない最終手段として使うもの」(益子氏)。ハックを多用すれば、せっかくWeb標準に合わせてマークアップしたメリットが失われてしまう。「ひととおり調整が終わったら、ハックを使わなくても解決できないか見直すことも大切だ」(益子氏)。

■関連サイト

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く