(ちょっとメモ)IEにもCSS3の機能を使えるようにする「CSS3 PIE」
最終更新日:2019年02月06日 (初回投稿日:2011年08月19日)CSS3 PIE は、JavaScriptによってIE6〜8にCSS3の表現をさせるものです。
http://css3pie.com/
トップページでフォームに数値を記入すると、リアルタイムで変化し、「Show CSS」をチェックするとCSSも見ることができます。
対応しているプロパティはこちら。(2011年8月19日現在)
- border-radius(角丸)
- box-shadow(ボックスシャドウ)
- linear-gradient(線形グラデーション)
- border-image(ボーダーに画像を表示させる)
- multiple background images(複数の画像を背景に指定させる)
「CSS3 PIE」を使ったサンプルファイルを作りましたので、IE6〜8で見てみてください。
「CSS3 PIE」の使い方
1.まずはダウンロード(本記事を書いている時点では、Ver.10beta4でした。)
「CSS3 PIE」トップページの右カラムに「Download」がありますので、Zipをダウンロード。
2. Zipを展開して「PIE.htc」のみをアップロード
「PIE.htc」ファイルのみを使用するサーバにアップロードします。他のファイルは不使用です。
3. CSSに「PIE.htc」の2↑でのアップロード先URLを追加
例えば、ボックスシャドウだったらこのように追加します。
最後に書くのがミソ。(標準型の書き方の後に書きます。)
div {
-webkit-box-shadow: 15px 15px 10px #999; /*←ベンダープレフィックス付き*/
-moz-box-shadow: 15px 15px 10px #999; /*←ベンダープレフィックス付き*/
box-shadow: 15px 15px 10px #999; /*←標準型*/
behavior: url( /*PIE.htc のアップロード先のパス*/ );
}
パスの書き方は、トップレベルドメインを省略して「/」で始まる書き方で指定します。
例えば「PIE.htc」を「 http://www.○○○.com/PIE.htc 」にアップロードしたのなら、
「http://www.○○○.com」を省略して url(/PIE.htc) と記述します。
または「 http://www.○○○.com/xxx/PIE.htc 」に置いたなら url(/xxx/PIE.htc) と書きます。
括弧 () の中のURLを「 " " (ダブルクォーテーション マーク)」で囲みたくなりますが、NG。 括弧 () の中にじかにURLだけを書きます。
相対URLで書いてもOKですが、複数のHTMLファイルから使うこともあるので 絶対URL で書いておいたほうが良いと思う。
最後に注意点です
これらはマジで重要。守らないと動作しません。
- 標準のCSS3の記述(ベンタープレフィックス無しの)を書かなければ「PIE.htc」は効果を発揮できません。
- 色は16進法で指定(「black」などの「色名での指定」は使ません。#000または#000000と書きましょう。)
- うまくいかない場合は「position: relative;」を追加してみます。behaviorで「PIE.htc」を指定した結果の不具合を、positionプロパティで解決できる場合があります。
div { background: #ffc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; behavior: url( /*PIE.htc のアップロード先のパス*/ ); position: relative; }
- グラデーションの場合だけは、もう1行、独自のプレフィクス「-pie-」を使用した記述が必要。
div { background: -moz-linear-gradient(top, #FF9, #9C0); background: -webkit-gradient(linear, left top, left bottom, from(#FF9), to(#9C0)); background: linear-gradient(top, #FF9, #9C0); -pie-background: linear-gradient(top, #FF9, #9C0); behavior: url( /*PIE.htc のアップロード先のパス*/ ); }
- サーバによっては、.htaccessファイルに AddType text/x-component .htc の1行を追記しないと、動作しないこともあるそうです。
- 関連記事
-
- (ちょっとメモ)Googleフォームで簡単・無料でフォームが作れる!
- (ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた)
- (ちょっとメモ)FC2ブログで「最終更新日時」が使えるようになった!
- (ちょっとメモ)さようなら〜IE8♪
- (ちょっとメモ)FC2ブログに「カテゴリ別一覧」を作る
- (ちょっとメモ)FC2ブログに はてブ と Google+1 のボタンをつける
- (ちょっとメモ)FC2ブログで OGP設定(Facebook, Twitter Cardsも)
- (ちょっとメモ)StatCounter でブラウザのシェアを調べる
- (ちょっとメモ)FC2ブログで PC用テンプレートをスマホで適用させる
- (ちょっとメモ)WordPressプラグイン SyntaxHighlighter Evolved
- (ちょっとメモ)SyntaxHighlighter 3.0.83 の使い方
- (ちょっとメモ)HTML5情報サイト「HTML5.jp」
- (ちょっとメモ)IEにもCSS3の機能を使えるようにする「CSS3 PIE」
- (ちょっとメモ)ブラウザのCSS3とHTML5への対応サイト
- (ちょっとメモ)トラッキングクッキーの無効化
初心者にも使いやすい(と思う)レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバーや ロリポップ!
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
No title
position ....でこちらもできました。
良かったです!
コメントありがとございます!
> position ....でこちらもできました。