CSS HACKを使用しない

スポンサーリンク

制作日: 2007/05/08
最新更新日: 2007/05/09

CSS HACKとは、各ブラウザのバグや仕様(解釈の違い)を振り分け条件に利用することで、特定のブラウザのみに適応されるCSS記述を行う方法です。スターハック、アンダースコア、Hollyハック(バックスラッシュハック)などと呼ばれるものがあります。

CSS HACKはユーザの利用環境によって製作者が意図した通りに表示されない可変式のメディアであるWEBメディア特有の2001年に公開されたInternet Explorer(以下、IE)6などの古いタイプブラウザと2004年に公開された次世代型ブラウザとされるFirefox、Safariなどの新旧技術の混在から生じたものと考えられます。

CSS HACKはJavaScriptによるブラウザ振り分けを必要とせず、各ブラウザごとにCSSファイルを用意する必要がないために便利ですが、ブラウザのバグを利用していることが多くCSSの解釈に関するバグ修正によるアップデートがあった場合、その後の視覚表現を保障できるものではないためオススメできません。

CSSによるコーディング

2004年頃からWEB業界は標準化団体・W3Cが規格化を行う技術仕様に合わせたHTMLコーディングが行われつつあります。CSSは新しい技術ではなくCSS Level 1は1996年の12月に勧告されていますが、それ以前のブラウザでは視覚表現を定義するCSS規格に準拠しているものが少なく、CSSのみでは希望通りのデザインやレイアウトが再現できなかったためにテーブルタグが多用されていました。

CSS規格に準拠した次世代型ブラウザの登場により本来、表用のタグであったテーブルをレイアウトのために使用するのではなく、文書構造のためのHTML、視覚表現のためのCSSと本来の役割に戻ったとことになります。また、ソースを簡略化することで検索エンジン最適化(SEO)対策があると考えられています。

  1. float問題

    テーブルタグに変わりCSSでコーディングされW3Cに準拠しつつありますが、オブジェクトを回り込ませる命令であったfloatがコラム エリア表示として本来の目的とは異なる使用方法が生まれました。これはCSSにコラム表示のための命令がないために起こる問題であると考えられますが、CSS初心者にはfloatなど各ブラウザごとのCSSの仕様に慣れる必要があります。

IE7とCSS

特にIE6は一部はWEB標準に準じているものの、一部の独自のCSS命令やCSS解釈を持っておりIEで表示チェックを行いながら制作するとFirefoxで表示確認した際にレイアウトが崩れることがあります。しかし、2006年10月18日に公開されたIE7ではWEB標準に準拠するように解釈の変更がなされているためにIE6以前のブラウザとIE7ではレイアウトが崩れることがあります。このような場合は、

  1. IE7より以前のIEでのみに特定のCSSファイルを読み込ませる

    <!--[if lt IE 7]><link rel="stylesheet" href=hoge_ie.css" type="text/css" /><![endif]-->

  2. IE7のみに特定のCSSファイルを読み込ませる

    <!--[if IE7]><link rel="stylesheet" href="css/hoge_ie7.css" type="text/css" /><![endif]-->

と、することで対処できます。

スポンサーリンク

サイトの作り方に関する参考書籍

  • A Better Design Webページ リ・デザインブック
  • A Better Design Webページ リ・デザインブックII
  • WEB DESIGNERS FILE
  • ウェブ時代をゆく - いかに働き、いかに学ぶか
  • ウェブ進化論 本当の大変化はこれから始まる
  • グーグル - Google 既存のビジネスを破壊する
  • グーグル・アマゾン化する社会
  • 「買いたい!」のスイッチを押す方法 消費者の心と行動を読み解く
  • 色彩の世界地図
  • 仕事に役立つWebデザイン完全ガイド
  • たのしいロゴづくり - 文字の形からの着想と展開
  • ニホンゴロゴ - ひらがなカタカナ漢字による様々な業種のロゴ
  • ネットショップ起業 成功バイブル
  • フリー <無料>からお金を生みだす新戦略
このページのトップに戻る