制作工程ブログ
おいでよコードの森

CSSでIE8以下に影を付ける!そして角丸まで付ける!

  • 2014年10月14日|
  • 若林 遼|

ドロップシャドウ

俺たちは本当はそんなこと知りたくないんだ!

「コードなんてよく知らないしハッキリ言うけど興味がない」
「そんなことより俺たちは台風が発生する仕組みについて知りたいんだ」
という方はこちら(台風のしくみ – 日本気象協会 tenki.jp)をクリックしてください。

先手必勝!参考サイト紹介

参考サイト:たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

離脱率を上げかねない参考サイトの先貼りも
忙しいユーザー様のためを思ってこそ!
僕のわかりにくい文章よりもわかりやすい参考サイトへGO!レッツ時短!!

やりかた

…さて、今回はCSSを書く際にぶつかる壁の1つとして
「影や角丸が対応してないIEのバージョンがある」問題の解決方法について書こうと思います。
もちろんbackgroundなどを使えば背景画像で表現することは可能ですが、
サイトの表示速度の向上のためにもここは画像ではなくCSSでナントカしたいところ。
(画像を読み込むよりもスタイルシートで表現したほうが重くなくて済みます)
しかしIE8以下にbox-shadowは対応していない…

「どうすりゃいいんだ!?」

そこで
>たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
で問題解決!
behaviorスクリプトを使えば角丸も影も付けることができます。
以下、実装までの手順の箇条書きです。

箇条書き

(0).PIE.htcファイルの配布元サイト:http://css3pie.com/のトップページの右サイドバーにある「Download」をクリック、
ダウンロードページで「Download PIE 1.0.0」をクリックして「PIE-1.0.0.zip」をダウンロードします。
(1).普段どおりに角丸や影をつけたいところにCSS・CSS3を記述します。
そして背景色をbackgroundで指定します(無色の白なら#ffffffで設定してください)。
(2).解凍したファイルの「PIE.htc」をFTPを使って任意のディレクトリ内に設置します。
(3).FTPを使って.htaccessファイルに(無ければ作ります)「AddType text/x-component .htc」を追記します。
(4).IE8以下に対応させたいスタイルシートに「position: relative;」と
「behavior:url(http://hoge.hoge/PIE.htc);」の2つのスタイルを追記します。
※ http://hoge.hoge/PIE.htcは(2)でPIE.htcファイルを設置した任意のディレクトリまでの絶対パスに置き換えてください。
(5).IE8以下のIEブラウザで見てIE微調整。

実際は
>公式ではposition: relative;を使わないと上手く動作しない場合や、同じセレクタ内の他の要素のエラー原因となる場合がある
引用元サイト:http://ameblo.jp/yoranote/entry-11324230072.html
と言われていることから1行ではなく2行、さらにbackgroundで背景色を指定してやらないと影の色がブロック全体を埋めてしまうので3行追加する必要がありますが
その点だけ気をつければIE7・8で角丸や影、その他のCSS3を表現できるので使えると思います。

DEMO(デモ)

高気圧


※ IE8・7の環境で見ても等圧線が確認できます。