CSS3 PIE(PIE.htc)の使い方と注意点まとめ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
CSS3 PIE(PIE.htc)の使い方と注意点まとめ
CSS3をIE6~8でも機能させる事が出来るbehaviorスクリプトの...
CSS3 PIEを使用する事で、IE6〜8においても以下のスタイル...
border-radius(ボックスを角丸にする)
box-shadow(ボックスに影をつける)
border-image(境界線に画像を使用する)
multiple background images(背景に最大4つの画像を使...
linear-gradient as background image(背景にグラデー...
ちなみに、opacityやtext-shadowは使用出来ません。
1行追加するだけの簡単なコードで、IE6〜8にもCSS3が適用...
他の似たような機能のスクリプトよりも対応しているスタイル...
『CSS3が適用される』と言ううたい文句ではありますが、
実際には『"CSS3風"のスタイル表示がIEでも表現できます』と...
モダンブラウザでコーディングするように使用すると、意外な...
かくいう私も、CSS3 PIEのおかげで半日程潰されました。。
「CSS3 PIE」で調べればいくらでも解説のサイトはありますが、
備忘録の意味も含めて、私もまとめをメモしておきます。
※11/06/17一部追記致しました。
CSS3 PIE(PIE.htc)の使い方
■CSS3 PIEのダウンロード
CSS3 PIEは以下のサイトからダウンロード出来ます。
CSS3 PIE_ CSS3 decorations for IE
ちなみに、このサイトでそのままデモの確認も出来ます。
■使用方法
細かい注意点は後述しますので、まずはサイトが説明している...
・ダウンロードした「PIE.htc」ファイルをサーバー上に配置し...
・「CSS3 PIE」を適用したいスタイルの最後に、behaviorスク...
view plainprint?
#style {
・・・
behavior: url(PIE.htc);
}
※CSS3 PIEのサイト上のデモで「Show CSS」のチェックを入れる...
デモのデザインソースを表示する事ができます。
基本的にはこれだけ。
CSS3 PIE(PIE.htc)の注意点
ところが、そうは問屋がおろしません。
言われたとおりにやってるのに、思ったようにスタイルが当ら...
そこで、CSS3 PIEを使用してスタイルを定義する際に注意すべ...
1.「PIE.htc」のパス指定
CSSファイルに記入する「PIE.htc」へのパスは、CSSファイルか...
CSSを読み込んでいるHTMLファイルから「PIE.htc」への相対パ...
2.position:relative;の指定
グラデーションや、角丸等の特定の要素を使用する場合、CSS3 ...
(これがないと背景色が表示されなかったり、ボーダーが消え...
3.サーバーによっては「.htaccess」の設定が必要
サーバーの仕様によって動作しない場合があるので、その場合...
view plainprint?
AddType text/x-component .htc
4.グラデーションや、ボックスシャドウ等は一部独自定義
CSS3 PIEのデモのCSSソースを見ればわかりますが、一部プロパ...
現行のモダンブラウザ用に指定しているCSS3のコードがある場...
その場合は現行のコードを元に、PIEのデモでコードを再度生成...
view plainprint?
/* 例 */
/* ボックスシャドウ */
box-shadow: #666 0px 2px 3px;
/* グラデーション */
-pie-background: linear-gradient(#EEFF99, #66EE33);
5.filter: alpha(opacity=?)はキャンセルされる
IEの独自拡張である、filter: alpha(opacity=?)は打ち消され...
ですので、背景の透過が効かなくなります。
ただし背景がtransparentの場合は透過するようです。
6.ボックスシャドウは透過しません
ボックシャドウの指定時に、アルファ値は無効となります。
ですので、薄い影をつけたい場合は、色で対応するしかありま...
7. ボックスシャドウと透過PNGは同時に使えない
CSS3 PIEでのボックスシャドウは、要素の裏側全体に適用され...
そのため、透過PNGと組み合わせてボックスシャドウを使用する...
(正確には、透過した下の色がシャドウの色なので、変な事にな...
そのため、PIE適用時は、#ffffff等で背景色を塗りつぶしてお...
8.総称セレクタ(*)に指定してみると、IEは固まる
…らしいです。
めんどくさがって、広い範囲に設定使用としてもダメみたいで...
●11/06/17 追記
9.一部jQueryとの共存に不具合が生じる
maximageや、フローティングウィンドウ系の動きのあるjQuery...
スタイルが思った位置にあたらなかったり、訳のわからない大...
これは私がモロにぶつかった問題でした、ネット上でも何名か...
原因は読み込みのタイミング等にあるようで、要素の位置や、...
今の所、うまい解決方法は見つかっていません。
どなたか、似たような問題で解決方法をご存知であれば教えて...
結論
たしかに、IE6-8でCSS3ライクなデザインを可能にするCSS3 PIE...
『CSS3 PIEを使えば、IEでもモダンブラウザ同様にCSS3が使え...
というレベルまではちょっと届いてないのかなぁ。という印象...
しかし、CSS3 PIEで出来ること、出来ない事をあらかじめしっ...
とても便利なスクリプトには違いありません。
他の同様のスクリプトと比べても使い勝手は良い方だと思いま...
WEB制作において、未だIEは無視する事のできないブラウザであ...
こう言ったツールを上手に使いこなし、より良いサイト制作を...
追記
先日IE9が正式にリリースされ、やっとIEでも多くのCSS3対応...
こう言ったハック的なスクリプトが問題にならないか少し心配...
(一応今のところ問題無しな感じですが…)
参考サイト
http://coliss.com/articles/build-websites/operation/css/c...
http://css.microrza.com/csstips/iecss_css3pie/
http://internet.designcross.jp/2010/11/css3-piepiehtc.html
http://unique-unique.net/css/css3/20110313100
http://blog.xaxxi.net/2010/11/04/css3-pie%E3%82%92%E4%BD%...
----
link:http://astone-labo.blogspot.jp/2011/05/css3-piepieht...
終了行:
CSS3 PIE(PIE.htc)の使い方と注意点まとめ
CSS3をIE6~8でも機能させる事が出来るbehaviorスクリプトの...
CSS3 PIEを使用する事で、IE6〜8においても以下のスタイル...
border-radius(ボックスを角丸にする)
box-shadow(ボックスに影をつける)
border-image(境界線に画像を使用する)
multiple background images(背景に最大4つの画像を使...
linear-gradient as background image(背景にグラデー...
ちなみに、opacityやtext-shadowは使用出来ません。
1行追加するだけの簡単なコードで、IE6〜8にもCSS3が適用...
他の似たような機能のスクリプトよりも対応しているスタイル...
『CSS3が適用される』と言ううたい文句ではありますが、
実際には『"CSS3風"のスタイル表示がIEでも表現できます』と...
モダンブラウザでコーディングするように使用すると、意外な...
かくいう私も、CSS3 PIEのおかげで半日程潰されました。。
「CSS3 PIE」で調べればいくらでも解説のサイトはありますが、
備忘録の意味も含めて、私もまとめをメモしておきます。
※11/06/17一部追記致しました。
CSS3 PIE(PIE.htc)の使い方
■CSS3 PIEのダウンロード
CSS3 PIEは以下のサイトからダウンロード出来ます。
CSS3 PIE_ CSS3 decorations for IE
ちなみに、このサイトでそのままデモの確認も出来ます。
■使用方法
細かい注意点は後述しますので、まずはサイトが説明している...
・ダウンロードした「PIE.htc」ファイルをサーバー上に配置し...
・「CSS3 PIE」を適用したいスタイルの最後に、behaviorスク...
view plainprint?
#style {
・・・
behavior: url(PIE.htc);
}
※CSS3 PIEのサイト上のデモで「Show CSS」のチェックを入れる...
デモのデザインソースを表示する事ができます。
基本的にはこれだけ。
CSS3 PIE(PIE.htc)の注意点
ところが、そうは問屋がおろしません。
言われたとおりにやってるのに、思ったようにスタイルが当ら...
そこで、CSS3 PIEを使用してスタイルを定義する際に注意すべ...
1.「PIE.htc」のパス指定
CSSファイルに記入する「PIE.htc」へのパスは、CSSファイルか...
CSSを読み込んでいるHTMLファイルから「PIE.htc」への相対パ...
2.position:relative;の指定
グラデーションや、角丸等の特定の要素を使用する場合、CSS3 ...
(これがないと背景色が表示されなかったり、ボーダーが消え...
3.サーバーによっては「.htaccess」の設定が必要
サーバーの仕様によって動作しない場合があるので、その場合...
view plainprint?
AddType text/x-component .htc
4.グラデーションや、ボックスシャドウ等は一部独自定義
CSS3 PIEのデモのCSSソースを見ればわかりますが、一部プロパ...
現行のモダンブラウザ用に指定しているCSS3のコードがある場...
その場合は現行のコードを元に、PIEのデモでコードを再度生成...
view plainprint?
/* 例 */
/* ボックスシャドウ */
box-shadow: #666 0px 2px 3px;
/* グラデーション */
-pie-background: linear-gradient(#EEFF99, #66EE33);
5.filter: alpha(opacity=?)はキャンセルされる
IEの独自拡張である、filter: alpha(opacity=?)は打ち消され...
ですので、背景の透過が効かなくなります。
ただし背景がtransparentの場合は透過するようです。
6.ボックスシャドウは透過しません
ボックシャドウの指定時に、アルファ値は無効となります。
ですので、薄い影をつけたい場合は、色で対応するしかありま...
7. ボックスシャドウと透過PNGは同時に使えない
CSS3 PIEでのボックスシャドウは、要素の裏側全体に適用され...
そのため、透過PNGと組み合わせてボックスシャドウを使用する...
(正確には、透過した下の色がシャドウの色なので、変な事にな...
そのため、PIE適用時は、#ffffff等で背景色を塗りつぶしてお...
8.総称セレクタ(*)に指定してみると、IEは固まる
…らしいです。
めんどくさがって、広い範囲に設定使用としてもダメみたいで...
●11/06/17 追記
9.一部jQueryとの共存に不具合が生じる
maximageや、フローティングウィンドウ系の動きのあるjQuery...
スタイルが思った位置にあたらなかったり、訳のわからない大...
これは私がモロにぶつかった問題でした、ネット上でも何名か...
原因は読み込みのタイミング等にあるようで、要素の位置や、...
今の所、うまい解決方法は見つかっていません。
どなたか、似たような問題で解決方法をご存知であれば教えて...
結論
たしかに、IE6-8でCSS3ライクなデザインを可能にするCSS3 PIE...
『CSS3 PIEを使えば、IEでもモダンブラウザ同様にCSS3が使え...
というレベルまではちょっと届いてないのかなぁ。という印象...
しかし、CSS3 PIEで出来ること、出来ない事をあらかじめしっ...
とても便利なスクリプトには違いありません。
他の同様のスクリプトと比べても使い勝手は良い方だと思いま...
WEB制作において、未だIEは無視する事のできないブラウザであ...
こう言ったツールを上手に使いこなし、より良いサイト制作を...
追記
先日IE9が正式にリリースされ、やっとIEでも多くのCSS3対応...
こう言ったハック的なスクリプトが問題にならないか少し心配...
(一応今のところ問題無しな感じですが…)
参考サイト
http://coliss.com/articles/build-websites/operation/css/c...
http://css.microrza.com/csstips/iecss_css3pie/
http://internet.designcross.jp/2010/11/css3-piepiehtc.html
http://unique-unique.net/css/css3/20110313100
http://blog.xaxxi.net/2010/11/04/css3-pie%E3%82%92%E4%BD%...
----
link:http://astone-labo.blogspot.jp/2011/05/css3-piepieht...
ページ名: