: サイト構築 -CSS

たった一行を追加するだけで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

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

「CSS3 PIE」を適用

既存のスタイルシートの最後に、behaviorスクリプトとして「PIE.htc」を指定します。

#myElement {
    ...
    behavior: url(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日

» たった一行を追加するだけで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 [...]

ページの先頭へ

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

適用前のCSS

「CSS3 PIE」を適用

更新情報