(ちょっとメモ)IEにもCSS3の機能を使えるようにする「CSS3 PIE」

「CSS3 PIE」は、JavaScriptによってIE6~8にCSS3の表現をさせるものです。

http://css3pie.com/

対応しているプロパティは(2011年8月19日現在)

  • border-radius(角丸)
  • box-shadow(ボックスシャドウ)
  • linear-gradient(線形グラデーション)
  • border-image(ボーダーに画像を表示させる)
  • multiple background images(複数の画像を背景に指定させる)

と、今のところ少ないですが、他のプロパティも開発中ということです。

トップページでサンプルプレビューが見れるのですが、フォームに数値を記入すると、リアルタイムで変化しておもしろいです。 しかも「Show CSS」をチェックするとCSSソースも見れます!

「CSS3 PIE」を使ったサンプルファイルを作りましたので、IE6~8で見てみてください。

「CSS3 PIE」の使い方

1.まずはダウンロード(本記事を書いている時点では、Ver.10beta4でした。)
「CSS3 PIE」トップページの右カラムに「Download」がありますので、Zipをダウンロード。

2. Zipを展開して「PIE.htc」のみをアップロード
「PIE.htc」ファイルのみを使用するサーバにアップロードします。他のファイルは不使用です。

3. CSSに「PIE.htc」の絶対URLを追加

例えば、ボックスシャドウだったらこのように追加します。
最後に書くのがミソ。(-webkit-や-moz-や、標準型の書き方の後に書きます。)

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);
}

この↑「絶対URL」の書き方、「/」で始まる書き方で指定するのが注意点です。
ルートの位置(第1階層)を省略して書くのです。

例えば「PIE.htc」を「 http://www.○○○.com/PIE.htc 」にアップロードしたのなら、
「url(/PIE.htc); 」と記述します。
または「 http://www.○○○.com/xxx/PIE.htc 」に置いたんだったら、
「url(/xxx/PIE.htc); 」と書きます。

括弧 () の中のURLを「 " " (ダブルクォーテーション マーク)」で囲みたくなりますが、NG。
括弧 () の中にじかにURLだけを書きます。

相対URLで書く方法もあります。その場合はHTMLファイルからのパスを書きます。
ただ、いろいろな場所にある複数のHTMLファイルから使うこともあるので「絶対URL」で書いておいたほうが良いと思う。

最後に注意点です

これらはマジで重要。守らないと動作しません。

  • 標準のCSS3の記述(ベンタープレフィックス無しの)を書かなければ「PIE.htc」は効果を発揮できません。(上のボックスシャドウの例だとグリーンのところ)これをJavaScriptで読み込んでIE用に翻訳して書き出してるんだと思う。
  • 色は16進法で指定(「black」などの「色名での指定」は使ません。#000または#000000と書きましょう。)
  • うまくいかない場合は「position: relative;」を追加してみます。behaviorで「PIE.htc」を指定した結果の不具合を、positionプロパティで解決できる場合があります。
  •  ↓「position: relative;」を追加した、角丸(border-radius)の例です。

    div {
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    	background: #FFC;
    	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行を追記しないと、動作しないこともあるそうです。

「CSS3 PIE」を使ったサンプルファイルを作りましたので、IE6~8でご覧ください。
このサンプルは、fc2のフリーサーバに置いたのですが、「position: relative;」を最後に加えたら、すんなり動作して、とても簡単でした。
「標準の書き方」部分の数値を変えると、PIEもちゃんと連動します。けっこう感動です。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

テーマ : webサイト作成
ジャンル : コンピュータ

tag : CSS3 CSS3PIE

スポンサーリンク

コメントの投稿

No title

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

良かったです!

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2017/03 | 03
- - - 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
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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