たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
CSS3 PIE_ CSS3 decorations for IE
デモ
デモではCSS3の角丸、ボックスシャドウ、グラデーションをリアルタイムに試すことができます。
IE7でのキャプチャ
CSS3が美しく適用されています。
上記は「CSS3 PIE」を使用した状態で、「Enable PIE 」のチェックボックスをオフにすると無効の状態になります。
「CSS3 PIE」をオフにしたキャプチャ
角丸もグラデーションも無しの状態になりました。
「Show CSS」のチェックボックスをオンにすると、現在のスタイルシートが表示されます。
上記デモのスタイルシート
※クリックで拡大
「CSS3 PIE」の使い方は簡単で、既存のCSS3のスタイルシートに一行を追加するだけです。
適用前のCSS
「CSS3 PIE」を適用
既存のスタイルシートの最後に、behaviorスクリプトとして「PIE.htc」を指定します。
「PIE.htc」は下記ページよりダウンロードできます。
PIE download
「CSS3 PIE」がサポートしているCSS3のプロパティは下記の通りで、他のプロパティへの対応も開発中ということです。
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image
以前紹介した「IE-CSS3」よりも対応しているプロパティが多く、シャドウも綺麗に表示されていると思います。
Post on:2010年7月14日
Comments
» たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス My_Room-bookmarks
on 2010年7月14日
[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]
わお。 - 空雨露
on 2010年7月14日
[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする [...]
links for 2010-07-14 « 個人的な雑記
on 2010年7月15日
[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス (tags: css) [...]
freewebdev.jp
on 2010年7月17日
たった一行を追加するだけでIE6/7/8をCSS3対応にする
「CSS3 PIE: CSS3 decorations for IE」
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
デモではCSS3の角…
ITキヲスク | 2010年7/11～7/17の週間ブックマーク
on 2010年7月18日
[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]
Bookmarks of This Week (7/11-7/18) - Sometime PHP
on 2010年7月18日
[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス « 前夜の小さな欠点
on 2010年7月19日
[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]
簡単に実装できるCSS3プロパティ…しかもIEにも対応できる | hT DESIGN blog
on 2010年7月19日
[...] 基本的にIEではCSS3は非対応なのですが、colissさんでも紹介されているCSS3 PIEを使えば、たった一行のコードを追加するだけでIEをCSS3対応にさせることができます。※対応ヴァージョンはIE [...]
日刊ウェブログ式
on 2010年7月20日
ココを押えておけばCSS3がだいたい分かるツール集
CSS3に対応した便利ツールや それを利用するために必要となる予備知識の参考記事をご紹介します。
IEでもCSS3 その２（PIE） | ダリの雑記：WEBプログラム版
on 2010年7月21日
[...] 「PIE」を利用する方法。（参考サイト：コリスさんのサイト） [...]
kase
on 2010年8月3日
Safariも対応済みですか？
コリス
on 2010年8月3日
> kase さん
SafariはCSS3に対応しているので、CSS3 PIEは必要無いですよ。
CSS3の表現でデザインをちょっと素敵にするサンプル 8
on 2010年8月21日
[...] ご存知のとおりIEはCSS3に対応していません。 このブログでは以前コリス：たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIEで紹介されていたbehaviorスクリプトを使用しています。 [...]
クロスブラウザチェックと角丸—(2) » Wake Up one make
on 2010年8月24日
[...] 行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html [...]
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス
on 2010年10月6日
[...] CSS3を使ってグラデーションを！IE6〜8にも対応させるため、CSS3 PIEを利用します。まずはCSS3 PIEをダウンロード。PIE.htcファイルをアップロードし、behavior: url(PIE.htc); と -pie-background:linear-gradient(グラデーションの位置と色); を記述すればOK。「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」で詳しく説明されています。 [...]
CSS3自分用覚え書き - つれづれお針子日和
on 2010年10月21日
[...] ○IE6,7,8のCSS3対応 http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html http://www.moongift.jp/2010/08/css3-pie/ [...]
MEC-Web Design Info » IE6でCSS3
on 2010年11月18日
[...] 参考サイト http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html カテゴリー: CSS タグ: コメント (0) トラックバック (0) コメントをどうぞ トラックバックURL [...]
CSS3で3ブラウザ対応ボタンを作る
on 2011年1月18日
[...] はCSS3に対応していないようです。 ここでは無理やり対応させるためにPIE.htcというBehaviorを利用しています。 参考：たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE 参考：CSS3 PIE [...]
» web：HTML5とCSS3をIEでも反映させる Re:
on 2011年3月28日
[...] coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html [...]
【Selectivizr】CSS3セレクタをIE（6～8）で使いたーい【万能】 - お豆さんのbrain
on 2011年6月25日
[...] ・「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス」 ・「IEでCSS3の効果を出せる。クロスブラウザ対応 CSSスニペット : Web Design KOJIKA17」 ・「border-image－CSS3リファレ [...]
IE(6-8)のCSS3、透過png対策 « mimumemo
on 2011年6月29日
[...] 用方法はコリスさんの記事を参考にしてください。 たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス [...]
HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで - YATのBlog
on 2011年7月11日
[...] html5とCSS3の各ブラウザの対応表。 たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE [...]
Rriver » IE6、IE7、IE8でCSS3が実装できる「CSS3 PIE」がいい感じ
on 2011年8月12日
[...] いつもためになるツールや手法を紹介しているコリスさんでも紹介されていた「CSS3 PIE」がすごく良い感じだったのでご紹介。 [...]
IEでCSS３を使える用にするライブラリ CSS3 PIE | ty's empty f'log
on 2011年8月29日
[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE ↑ こちらもオススメ CSS3 PIE（PIE.htc）が上手く動作しない際の注意点 [...]
角丸－コピペで使えるCSS3 | webデザイン初心者が中級デザイナーになるためのブログ
on 2011年9月10日
[...] Opera：10.5以上 ※CSS Pieを使えば、IE6～8にもCSS3が適用できます。詳細はコリスさんのページをご覧ください。 [...]
島
on 2011年10月20日
はじめまして。
ieの6.7.8.9で角丸表示をしたいのですが、
こちらのページにあるように試してみたのですがうまくできませんでした。
自分の設定に間違いがあることはわかっているのですが、どこを間違えてるのかがわからないほどの初心者です。
「PIE.htc」をダウンロードして、内のCSS部分のborder-radiusが入ってるところにbehavior: url(PIE.htc);を追行しましたが変化が表れませんでした。
どこか別のところにもなにか打ち込まなければいけないのでしょうか。
お忙しいところ差し支えなければ、もう少し具体的な手順と方法を教えてもらえないでしょうか。m(__)m
コリス
on 2011年10月20日
> 島 さん
使用方法はそれで特に問題ないように思えます。
ひょっとしたら、サーバー側の設定で「.htc」がないのかもしれません。
もし「.htaccess」を編集可能であれば、次の一行を追加してみてください。
AddType text/x-component .htc
WebCake » Blog Archive » CSS3 PIE（PIE.htc）が利かない場合の対処法
on 2011年11月5日
[...] も･･･。 たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE [...]
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
on 2012年1月20日
[...] CSS3 PIEは角丸やボックスシャドウなどのCSS3をIEにも対応させるスクリプト。使い方は「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」が参考になります。 [...]
【CSS】IEにCSS3を適用する方法 | r-tgw.net:WEBの備忘録 – ブログ -
on 2012年2月5日
[...] CSS3 IEにもグラデーションを適用したい！ たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE カテゴリー: CSS タグ: CSS3, htc, IE, PIE 作成者: r_tsugawa [...]
IEでもCSS3を実現する方法 | e-sign
on 2012年2月15日
[...] 以下参考にさせていただいたサイトです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス IEでもCSS3 ほんっとにはじめてのHTML CSS3PIE [...]
時間が無い人のためのシーン別CSS３に関する記事のまとめ | ひよっこWebデザイナーブログ
on 2012年2月28日
[...] たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html [...]
CSS3 PIEでIEでも背景に複数の画像を使用する | ライラックミモザ
on 2012年5月14日
[...] 仕事でHTML5／CSS3を本格的に使用しはじめました。HTML5にしても、CSS3にしても、まず悩ましいのがIEへの対応。もちろん、IEを対応させないわけにはいかず、CSS3をIEで使用するために、コリスさんの「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」で紹介されていた「CSS3 PIE」というスクリプトを利用しました。 下記はCSS3 PIEの簡単な使用法と備忘録です。 [...]