【CSS3】回転(rotate)とグラデーション(gradient)がIE9で効かないのを克服してみた(CSS3 PIEも使うよ)

Total 6,773 views
この記事の所要時間は約 7分です。

標題の件そのままですが、CSS3 の設定は CSS2.1 に比べてはるかに多く
とても手打ちできないのでいつもジェネレーターに頼っています。

ただジェネによっては対応ブラウザをどこまで含めるかで若干の差があるようです。

スポンサーリンク


そのためでしょうか、
IE9(Internet Explorer 9) で問題なく表示されるはずのものが表示されずに
慌ててしまった件の解決記を書いてみました。

 

い~つも IEに悩まされる

ブラウザのシェア動向をちらほら見ていると
一時期の IE独占状態から今は IEも Google Chromeとほぼ同じシェアにまで
下がったようですね。

どちらもおよそ 3割強といったところでしょうか。

それに続くのが Firefoxと Safari。
Operaは相変わらず劣勢ですね。

ということは IEの中でも CSS3に『ほぼ』対応した IE9とその他のモダンブラウザで
半分以上のシェアが占められていると推測されます。

ということで、
物品販売サイトでの賑やかし効果(目立たせたりインパクトをつけてみたり)をこれまでは画像処理に頼ってきたのを、そろそろ CSS3で補えるものは補ってみようと思い立ちました。
(※IE7と IE8には CSS3 PIEで対応してみます)

 

イメージ画像

 

そうはいっても CSS3のプロパティはとても複雑です。

手打ちなんかできないんで自ずとジェネレーターに頼ることになるんですが
ジェネレーターによって吐きだされるコードってマチマチなんですよね。

結果、IE9でも最初はうまく表示されない現象に出くわしてしまうことになり
またいつものように解決まで時間を取られてしまいました。

素人web屋のことなので、そんなの常識だよという部分もあるかもしれませんが、
似たような現象で悩んでいる人がいるかもしれないので
順を追って説明していきます。

 

とってもラクちんな CSS3ジェネレーター

普段使っている CSS3ジェネレーター(オンラインサービス)はいくつかありますが
個人的に使用頻度の高いのが「CSS3 Playground」というサービスです。

このジェネの特徴は「ほぼ使いたいサービスがこのジェネだけで完結する」という点。

すべて設定し終わったあとに吐き出された CSSをコピーするだけでいいので
とってもラクなのです。
(いくつかの余計なプロパティもデフォルトで書かれてしまっているのでそのあたりは自分で随時削除する必要があります)

そろそろ本題へ行かないと。

 

私がやろうとしたのは
画像に角丸処理をし(Border Radius)、若干のをつけ(Box Shadow)
ほんのちょっとだけ回転をかける(Rotate)というものです。

「CSS3 Playground」で調整し、
吐き出されたコードをそのまま <div id="test">という仮のブロック内の『画像』に充ててみます。

 

これをブラウザでチェックした結果が下図になります。

キャプチャ画像

IE9の方だけ「回転」が効いてませんね。

調べてみたら
原因は IE9用のベンダープレフィックス『-ms-』が付いた指定がなかったからでした。

ベンダープレフィックスというのは、上記コードの 2、3行目にあるように
-webkit- とか -moz- といったそのブラウザでのみ理解可能な専用の命令文です。

このあたりはまだ策定途中の CSS3なんで、なくても正常に認識される場合もあれば
ブラウザのバージョン違いで認識してくれないこともあるようです。

それが上記のコードにも表れてます。

『-ms-』がついた命令がないのに角丸とボックスシャドウは効いてるんです。
このあたりがちょっとややこしいですね。

解決法としては「transform: rotate」のブロックに

上記を追加してやれば解決します。
すると Chromeと同じように IE9でも画像が回転して表示されます。

今のところは面倒くさくても
『-ms-』付加コードを全部に付けておいた方がいいかもしれません。

区切り画像

次にブロックの背景にグラデーションをかけてみます。

「CSS3 Playground」で吐き出されたコードを <div id="test">ブロックに充てます。

さっきのコードと比べるとなんか物足りないですね。

そこでこれに関しては「CSS3 GENERATOR」も使ってみることにします。
(角丸やボックスシャドウ、グラデーションだけなら「CSS3 GENERATOR」の方が使いやすいかもしれません)

吐きだされたコードは以下の通り。

一気にコードが増えましたね。

これをブラウザでチェックした結果が下図になります。

キャプチャ画像

 

-ms-linear-gradient……」があるにも関わらず IE9の方はグラデがかかっていません

この辺のところをさらに調べてみたら
なんと IE9はグラデーションには非対応とのこと。

IE10ではサポートされるみたいです。

 

これについては、本来なら IE8以下に疑似的に対応させる CSS3対策用ファイル「CSS3 PIE(後述します)」が入っている状態で、
「-pie-background: linear-gradient……」という接頭辞を付けた宣言と
PIE.htcファイルの url指定を付け加えることで解決します。

「-pie-background-image:」ではなく「-pie-background:」になっていることに注意してください。

私の環境では「-image」が付いているとうまくいきませんでした。なので上記で出てきた「background-image」はすべて「background」に統一し直してます。

当たり前ですが「PIE.htc」を設置してないと機能しません。

これでIE9にも背景グラデーションがかかります。

区切り画像

さて、次に IE7と IE8ではどうなっているかというと
CSS3 PIEを設置しておいたのできっとうまくいってる筈なんですが
見てみたら何の変化もありませんでした。
(CSS3 PIEに関しては当ブログの「CSS3 PIEを入れてみた」をご覧ください)

PIEの設定は CSSの中に「behavior: url(PIE.htc);」と書けばいいのですが
それが効いてないようです。
(この書き方は HTMLファイルと PIE.htcファイルが同ディレクトリにある場合の書き方です)

改めて調べ直したところ、
『url は絶対パスで書くと症状が改善する』というのと
『position: relative;を付加せよ』
とのご意見が結構多かったので、それを試してみました。

しかし…………結果は変わらず。

 

さぁ、困りましたねぇ。

当ブログではうまくいくのに別のブログだとうまくいかない…………って
もしかしてまたサーバー絡み?

ということで、再度サーバー絡みで検索したところ、
『.htaccess に AddType text/x-component .htc を設置すると直る』
との記事あり。

原理はさっぱりわかりませんが
.htcファイルを認識させるためのいつものおまじないのようなものなんでしょうか。

 

これらをまとめると、

  • .htaccess に「AddType text/x-component .htc」を追記
  • CSS3 を設定してある ID やクラスのプロパティに「behavior: url(http://(絶対パス)/PIE.htc);」を追記
  • 「position: relative;」を追加

これで IE7、IE8で見たところ
角丸、ボックスシャドウ、グラデーションともきれいに処理されてました。

でも回転だけはどうやってもダメです。

 

回転については、今回は 4度の傾きだったので不可でしたが
45度ごとの回転ならば IEでも表示可能だそうです。

1~4の数値を指定する宣言の仕方みたいで
これについては割愛させていただきます。

私の環境では上記 3つのまとめのうちどれか一つが欠けてもうまくいきませんでしたが、サーバーによっては .htaccess対策は必要ない場合もあります。

「position: relative;」を指定するとレイアウトが崩れる場合もあるので適宜確認した方がいいです。

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)