TearsSwitch

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

コーダーblog
若林 遼 若林 遼
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の環境で見ても等圧線が確認できます。
若林 遼
若林 遼

1987年5月7日生まれ、大阪出身。東京電機大学理工学部 平成25年卒。

大学卒業後、生きる目的を見失っていたところ救世主・米田氏と創造主・赤坂氏と出会う。
アルバイトをしながら職業訓練校に通い卒業後、TearsSwitchに入社。
一人暮らしを始め、実家にて生卵を隠れて食べる生活から脱却。
新しいことに抵抗がなく、便利そうなら取り入れるのが強み。

お客様の笑顔を妄想しつつ、日々仕事に励みます。