Web学習 【25】 CSSハック

更新
2015年01月06日(火)

本文を追記欄に移動

CSSハック

 ウェブデザイン技能検定3級の問題に「CSSハック」が出題されているので、調べてまとめてみました。(2014/2/23訂正)

 CSSハックについての出題ではありませんでした。該当箇所を訂正・追記させていただきます。(2014/2/23追記)

 Google「CSSハック
 Wikipedia「CSSハック

Wikipediaより:

CSSハック(英:CSS Hack)は、Webサイト作成の際にWebブラウザ間(以下単に「ブラウザ」)で異なるCascading Style Sheets(CSS)の実装状況の違いやバグなどを吸収し、極力各ブラウザでの表示を同一にするためのテクニックの一つである。

 ブラウザによって異なる表示をする際にも利用でき、表示を同一にする目的以外にも使えます。

 ウェブデザイン技能検定3級の「過去問題」では実技試験に下記の使い分けが出題されていました。(2014/2/23訂正)

  • Internet Explorer 6
  • Internet Explorer 7または8
  • Internet Explorer 9または10
  • FireFox

 個人的にはこれが3級の範囲というのは意地が悪いと思うのですが、出題されるからには知っておかないといけません。原理を理解するのが難しい面があるので、理論的なことは置いておき、覚えてしまうのがいいと思います。(2014/2/23訂正)

 私もイマイチ理解しきれていないので、下手な解説を載せるのはやめました。検索結果に出てくるサイトをよく読んでください。

Webクリエイターボックス「CSSハック一覧 – IE, Firefox, Safariなどなど
デザイン事務所 エイビッツ「IE6/IE7/IE8/IE9/IE10/&モダンブラウザ CSSハックまとめ

 CSSハックが理解できなくても、最悪の場合は解答の選択から外せばいいので、無理して理解する必要はありません。でも記憶の片隅に入れておくと役に立つと思います。(2014/2/23訂正)

追記(2014/2/23)

 問題文から各ブラウザごとに表示する画像を変更するようにCSSを設定すると読み取ってしまいましたが、実際の試験で用意されている画像とは、ブラウザごとの表示例の画像でした。つまり、受検者の受検PCのブラウザにあわせた画像を参考にするとの趣旨でした。

 3級レベルでCSSハックとは高難易度だと思っていましたが、私の勘違いでした。過去問が問題文のみでPC用素材が公表されていないので、勘違いした次第です。試験を受けて勘違いに気づきました。

 まさかこのブログを見て同様の勘違いをされた方はいないと思いますが、お詫び申し上げます。

 それと後から思いつきましたが、ブラウザごとに使用するCSSを変更する方法は、「CSSハック」の手法以外に「条件付きコメント」を使う方法というのもあります。

Google「条件付きコメント

<!--[if IE 6]>
     <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
     <link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if IE 8]>
     <link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
<!--[if gte IE 8]>
     <link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->
<!--[if !IE]><!-->
     <link rel="stylesheet" type="text/css" href="default.css" />
 <!--<![endif]-->

 検定とは全く関係がありませんが、参考にどうぞ。

関連記事
この記事が参考になりましたら拍手をお願いします。管理人のモチベーションが上がります。m(_ _)m

コメント

EMAIL:
URL:
TITLE:
cssハック、面倒ですよね。
もうすぐie8以下は切り捨てるのが普通になると思うので、その頃には試験範囲も変わるかも?
というか、さっさと過去のIEは消えればいいのに(笑)
宵乃 さんへ
EMAIL:
URL:
WindowsXPのサポートが終わればまた試験範囲も変わると思いますが、いっそのことvistaはなかったものとしてWindows7以降構成(ie8以降)を基準に試験範囲を決めてほしいです。
過去問を解いてみると、使いまわしが多すぎて全く制作コストをかけていないのが頭にきます。どんだけ怠慢なんだよ! おかげで試験対策は楽ですけどw

コメントの投稿

非公開コメント


ページ下部までご覧いただきありがとうございました。