Explorer(IE)です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか?ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。CSS3の対応状況を確認するまず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。SupportCSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。CSS3セレクタに対応するセレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何?」「CSS3セレクタってどういうものがあるの?」って方は「保存版!CSS3セレクタの説明書」をご覧ください。Selectivizr.jsここで提供されているselectivizr.jsとJavaScriptライブラリを読み込むだけで、CSS3セレクタがIE6~8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。src="selectivizr.js"></script><![endif]-->ライブラリは以下のものが使え、ライブラリごとでセクレタの対応状況が違います。jQueryなんかは元々使っている人も多いと思います。そんな場合はselectivizr.jsを読み込むだけで大丈夫です。jQueryDojoPrototypeYUIMooToolsDOMAssistantNWMatcherでは、ちょっとだけ注意点を説明します。APIのjQueryを使っています。type="text/javascript"></script>もちろんこれでちゃんと動きます。CSSは外部ファイルに記述するSelectivizrは外部ファイルでCSSを指定しないと機能しません。head内に記述せず、外部ファイル内でCSSを記述しましょう。ローカルでは動かないサーバにアップしないと動きません。ローカルで試したけど動かないので諦めるなんてことがあったらもったいないですね。セレクタに関してはSelectivizrの一択かなと個人的に思ってます。デメリットといえば1番普及しているjQueryを使ったときの対応状況がいまいちというところくらいです。CSS3プロパティに対応する次はCSS3プロパティですが、こちらはセレクタのように簡単にはいきません。対応する方法は色々あるものの、使えるプロパティが限られており、正確に再現できない場合もあります。ここでは個人的に使えると思った2種類を紹介します。IE利用できるプロパティは以下のとおりで、ジェネレータもありますので簡単に使えます。CSSにチェックを入れるとコードが表示されますが、PIE.htcをダウンロードするのと、アップした場所の指定だけ気をつけてください。url(PIE.htc);}border-radius、box-shadow、border-imageについては5行目にあるようにPIE.htcを読み込むだけで対応できます。box-shadowのinsetには対応していません。背景関連だけは「-pie-」というベンダープレフィックス的なものを頭につける必要があります。グラデーションの場合はこんな感じになります。url(PIE.htc);}背景に複数の画像を指定する場合はこんな感じです。url(PIE.htc);ということで、使用方法を簡単に説明しました。ファイルをアップして1行追加するだけなので手軽に使えます。Library外部ファイルを4つ読み込む必要がありますが容量は軽いです。ページの下の方からダウンロードできます。使えるプロパティも多いですし、精度も高いと思います。カラーtransform、box-shadow、gradientは前にベンダーペレフィックス的な「-sand-」をつける必要があります。text-shadowを使う場合は、textshadow.jsも読み込む必要があります。いうことでCSS3プロパティに対応する方法を2種類紹介しました。他にも方法はありますが、私の知る限りではこの二択です。IE独自の仕様で対応するIEには、CSS3っぽいIE独自のプロパティがありますので、CSS3対策としてそれなりに使えます。比較的実用的だと思うものを紹介します。要素を回転させるtransform指定した要素を回転させることができます。progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}上からSafari、Chrome用、Firefox用、IE用となっています。上2つは回転する角度を、一番下は1から4の数字で90度ずつ回転します。【サンプル】このように要素が丸ごと回転します。実際180度はあまり使いどころもないかもしれませんが、90度や270度はレイアウトのちょっとしたアクセントに使えそうです。ボックスに影をつけるbox-shadow指定するボックスに影をつけます。Strength=3);}上からSafari、Chrome用、Firefox用、IE用となっています。colorが影の色、directionが角度、strengthが幅となっています。【サンプル】このようにボックスに影がつきます。要素の透明度を指定するopacity指定したところの透明度を指定することができます。filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);}【サンプル】このように背景が半透明になります。ともに数値が小さいほど透明になります。RGBAカラーモデルで色を指定するRGBAカラーモデルは、RGBカラーモデルのred・green・blueに、alphaが加わったもので、alphaは色の透明度を表します。ff(不透明)の範囲で透明度を指定し、RRGGBBは色を指定します。本来gradient()はグラデーションとして使うものです。【サンプル】RGBAカラーモデルで背景を指定しています。5.IEは諦めて違うスタイルを適用するIE対策は色々考え出されていますが、プロパティについてはいまいち決定的なものがありません。この記事のタイトルに反することですが、いっそうのことIEは諦めてしまうのも1つの手段かなと思います。underline\9;}CSSハックですね。下の行はIE8以下にだけ適用されます。IE以外はピカッと光って、IEにはアンダーラインのみ表示されます。以下のようにバージョンごとでの振り分けもできます。*/}CSSハックはあまり好きじゃない人もいるかもしれませんが、いざというときのために覚えておけば使えると思います。まとめということでCSS3を使う際のIE対策についてまとめてみました。よると、2012年3月現在でIE6のシェアは6.1%もあります。10年以上前に出たIE6ですらこのシェアですので、何も気にせずCSS3を使える日はまだまだ来ないと思います。そんな現状ですので、今回紹介した方法を覚えておくのもいいかと思います。ウェブサイト作成に役立つことをいろいろと@webpark2さんのツイートこの記事に付いているタグの最新記事一覧loading...コメントNAME:URL:COMMENT:PASS:※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。EntryCSS(スタイルシート)の基本、小技、テクニック総まとめ意外と知らない!?CSSセレクタ20個のおさらい保存版!CSS3セレクタの説明書CSS3を使うにあたって知っておきたいIE対策のまとめCSSの擬似要素を使った見出しデザイン擬似要素とCSS3を使ってリストメニューを楽しくデザインオンマウスでふんわり現れる!CSS3を使った吹き出しサンプル5つjQueryとCSS3を使ったアコーディオンメニューを詳しく説明しますCSSだけで作る動きのあるドロップダウンメニューjQueryを使った一定以上スクロールすると上に固定される横メニューCSS3について知っておきたいことのまとめ配色、デザイン、文章、写真、センスがないとあきらめる前に勉強しよう!TweetWebparkについて和歌山に住むごく普通のサラリーマンです。趣味でウェブサイト作成に関することをいろいろと勉強しています。役立ちそうな内容をまとめてブログに載せています。