(ちょっとメモ)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行を追記しないと、動作しないこともあるそうです。
関連記事
このエントリーをはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

No title

丁寧でよくわかりました!!
position ....でこちらもできました。

良かったです!

お役に立って、良かった。
コメントありがとございます!
> position ....でこちらもできました。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
11 | 2023/12 | 01
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31 - - - - - -
Archive
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.