注意！
この記事は、HTMLとCSSの知識がない人が読んだら、きっとチンプンカンプンです。
HTML5にCSS3。
それは、web制作をする者にとって色んな面倒臭いことから解放される魔法。
ただ、2012年3月頃に正式勧告予定とのことで、どのブラウザもまだ100%対応には至ってない。
とは言え、Mozilla FirefoxやGoogle Chrome、Safari、Operaといったいわゆるモダンブラウザは、正式勧告を前にしてどんどん対応が進んどる。
で、極めて空気の読めない問題児のInternet Explorerちゃん（以下IEちゃん）は、相変わらず置いてけぼり状態。
ここまでできない子ちゃんぶりを見せつけてくれると、怒りを通り越して憐れみすら感じる。
そんなかわいそうなIEちゃんに、ほんのちょこっと救いの手を差し伸べてくれる優しい人が世界にはおる！
その優しい人の名は、Jason Johnstonさん！
（日本人にはそこまで優しい人はおらんみたい。）
具体的に言うと、モダンブラウザのほとんどがすでに対応済みのCSS3の一部機能を、IEちゃん（ver.6～8）にもできるようにさせてあげよう、っちゅうもので、CSS3 PIE（以下パイパイ）っちゅうbehaviorスクリプトをフリーで提供してくれとるのだ！
パイパイのおかげでおバカなIEちゃんでも理解できるようになるCSS3プロパティは以下！
- border-radius
- box-shadow
- linear-gradient
- border-image
- multiple background images
パイパイの使い方は、まずはパイパイをダウンロード（PIE-1.0beta3.zip／現時点の最新バージョン）し、解凍してできるPIE.htcをサーバ上の任意の場所に置く。
（解凍した時にjsとphpもできるけど、作者さんがhtcを推奨しとるから、htcを使うのが無難。）
後はcss内の上記プロパティを使いたい箇所にbehavior: url(~/PIE.htc);と記述すればOK！
"~"の部分でパスを指定するんやけど、相対パスはダメで、絶対パスにする必要がある。
（Apache等のローカル環境でもちゃんと動作する。）
それでもIEちゃんが言うこと聞いてくれへんこともあるけど、その場合はその要素にposition: relative;か、z-index: 0;を追加すれば言うこと聞いてくれるかも！
めっちゃ簡単やね！
多少レンダリングに時間掛かってまうみたいやけど、体感ではよう分からんレベルやし、たぶんjQuery等のライブラリを使って実装するよりは速いんちゃうかな？（未検証やけど。）
んで、この記事に興味を持って読んどる人には言わずもがなやろうけど、現時点で上記プロパティをFirefoxに対応させるには"-moz-"、Google Chrome、Safariに対応させるには"-webkit-"のベンダープレフィックスをお忘れなく！
（Operaはベンダープレフィックスなしでも動くやつは動くっぽい。）
っちゅうことで、上記プロパティがどんなもんか、試してみまひょ！
ところで、アメブロのサーバにはPIE.htcをアップできへんかったから、これ以降は
Internet Explorer 8以下では正常に見れません！
（IEちゃんで表示テストしたい人は、PIE.htcをダウンロードして以下CSSをコピって自分の環境でテストしてみて！）
ちゃんと見たい人は、Firefox, Google Chrome, Safari, Operaのできるだけ新しいバージョンで見てちょ！
で、サンプルCSSではマージン等の余分な設定は省略しとるから、試してみたい時は適当に追加すべし！
（ここではパイパイの使い方を中心に説明しとるから、各プロパティの細かい説明はしません！）
ちなみに、このブログを書いとる時にテストしたブラウザは以下の通り！
（いずれもWindowsのみ）
- Internet Explorer 6~8 : 有名なくせにいつも孤独でできそこないのイエちゃん
- Mozilla Firefox 3.6 : 友達たくさん！女子の間で人気No.1のキツネくん
- Google Chrome 8 : 鳴り物入りでやって来た転校生の優等生クロちゃん
- Opera 11 : よう分からん外人のオペさん
- border-radius : 角丸くん
- RESULT
- border-radius
- CSS
- .class{
background: #ff6600;
border: 1px solid #cc3300;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior: url(~/PIE.htc);
}
うん、どのブラウザでもちゃ～んと角丸くんになっとるね！
ちなみに、設定次第ではこ～んな変な形も作れる！- RESULT
- border-radius
- CSS
- .class{
background: #ff6600;
border: solid #cc3300;
border-width: 1px 3px 5px 8px;
border-radius: 10px 30px 50px 80px / 80px 50px 30px 10px;
-moz-border-radius: 10px 30px 50px 80px / 80px 50px 30px 10px;
-webkit-border-radius: 10px 30px 50px 80px / 80px 50px 30px 10px;
behavior: url(~/PIE.htc);
}
クロちゃんのボーダーがバグっぽい！
どうやら優等生の脳みそは、こんな変な形は許容範囲外やったみたい。
他のブラウザはすべてOK！- box-shadow : 箱影さん
- RESULT
- box-shadow
- CSS
- .class{
background: #ff6600;
border: 1px solid #cc3300;
box-shadow: 3px 3px 10px #666666;
-moz-box-shadow: 3px 3px 10px #666666;
-webkit-box-shadow: 3px 3px 10px #666666;
behavior: url(~/PIE.htc);
}
イエちゃんはちゃんと影はできとるものの、なんか背景とボーダーの間に隙間ができてしもた！
けど、これはこれで新しい！他のブラウザは全てOK！
ちなみに、影は外側だけでなく内側にも作れる。- RESULT
- box-shadow
- CSS
- .class{
background: #ff6600;
border: 1px solid #cc3300 inset;
box-shadow: 3px 3px 10px #333333 inset;
-moz-box-shadow: 3px 3px 10px #333333 inset;
-webkit-box-shadow: 3px 3px 10px #333333 inset;
behavior: url(~/PIE.htc);
}
あれま、イエちゃんだけ影が表示できず！
パイパイに教えてもらってもイエちゃんにはちょっと難しかったかな～？
かわいそうに、また友達減ってまうね、、、。他のブラウザも、影のでき方がちょいと違う！
キツネくんとオペさんは大体同じでいい感じなんやけど、クロちゃんの影の付き方がダサイ！
優等生なだけに、ファッションには興味ないんかなぁ？- linear-gradient : グラたん
- RESULT
- linear-gradient
- CSS
- .class{
border :1px solid #ff6600;
background: #ff6600;
background: linear-gradient(top, #ff6600, #ffcc00);
background: -moz-linear-gradient(top, #ff6600, #ffcc00);
background: -webkit-gradient(linear, center top, center bottom, from(#ff6600), to(#ffcc00));
-pie-background: linear-gradient(#ff6600, #ffcc00);
behavior: url(~/PIE.htc);
}
珍しくオペさん、グラデーションできず！
ツンとした顔でさり気なく何でもこなしてまうオペさん、グラたんは嫌いみたい。他のブラウザは全てOKやけど、若干の注意点が！
キツネ君の場合はベンダープレフィックスを付けるだけでええんやけど、クロちゃんは文法そのものが違う！
イエちゃんは、パイパイ独自のベンダープレフィックス"-pie-"を付けなあかんみたい！特にベンダープレフィックスを付ける位置を間違えそうやから気ぃ付けなあかんなぁ！
ちなみに、角度を付けたり、色を色々使ったり、色の位置を指定したり、っちゅう複雑なグラデーションもできる！
- RESULT
- linear_gradient
- CSS
- .class{
border:1px solid #ff6600;
background:#ff6600;
background:linear-gradient(left 30deg, #ff6600 0%, #ffcc00 60%, #ffffff 100%);
background:-moz-linear-gradient(left 30deg, #ff6600 0%, #ffcc00 60%, #ffffff 100%);
background:-webkit-gradient(linear, left bottom, right top, from(#ff6600), color-stop(60%, #ffcc00), to(#ffffff));
-pie-background: linear-gradient(left 30deg, #ff6600 0%, #ffcc00 60%, #ffffff 100%);
behavior: url(~/PIE.htc);
}
コーディングが長ったらしくて面倒臭いけど、PhotoshopとかIllustratorのグラデーションの設定方法と考え方は同じやから、そんなに難しくはないね！
信じられないことに、あのイエちゃんでちゃんと表示できとる！
（もともとfilter機能でできとったことやし、当然と言えば当然かも。）で、やっぱオペさんには無理っぽい。
クロちゃんはどうやら角度指定できへんみたいやけど、角度まで細かく使う機会があんまりなさそうやから別に問題ないんかな？- border-radius & box-shadow & linear-gradient : 丸影グラたん
- RESULT
- all
- CSS
- .class{
border: 1px solid #ff6600;
background: #ff6600;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 3px 3px 10px #666666;
-moz-box-shadow: 3px 3px 10px #666666;
-webkit-box-shadow: 3px 3px 10px #666666;
background: linear-gradient(top, #ff6600, #ffcc00);
background: -moz-linear-gradient(top, #ff6600, #ffcc00);
background: -webkit-gradient(linear, center top, center bottom, from(#ff6600), to(#ffcc00));
-pie-background: linear-gradient(#ff6600, #ffcc00);
behavior: url(~/PIE.htc);
}
たった3つのプロパティを適用させたいだけやのに、このクソ長いコードはなんじゃあ！
それはさておき、結論として言えることは、
パイパイを使えば、このとっても使えるプロパティをIEでも使える
っちゅうこっちゃ！
（オペさんがlinear-gradientに対応してないのが残念やけど。）
あと2つパイパイでできることがあるんやけど、いずれも画像が必要で面倒臭いから今回はなし！
今まで問題児やったIEちゃんやけど、次期バージョンのIE 9ではや～っとHTML5とCSS3に対応するらしい。
あ～、HTML5とCSS3の正式勧告が待ち遠しい！
2年後には、こんな会話ができるような世の中になってほしいもんやね！
孫娘：
「ね～おじぃちゃん、CSSはっくってなぁに？」
祖父：
「それはのぅ、わしらが若い時にずいぶん苦しめられてのぅ、、、。いんたーねっとえくすぷろぅらーって悪いやつがおってな、周りのことも考えずに好き勝手するもんじゃから、み～んなそいつに振り回されてのぅ、、、。そいつが弱いやつじゃったらな～んの問題もなかったんじゃが、どっこい、そいつが一番強くてのぅ、、、。それはもう大変な時代じゃった。死んだばあさんは、そいつのせいで死んだも同然じゃ、、、。あぁばあさん、こんないい時代をばぁさんと一緒に生きてみたかったのぅ、、、。あぁそうそう、CSSハックじゃったな。例えばのぅ、こめ、えいちてぃーえむえるなんたらかんたら、、、、、、、、、、。」
孫娘：
話がおもしろくなくてどっかへ消える。
祖父：
「おぉ、いけないいけない。年寄りの長話は子供には面白くなかったかのぅ。」
ほなほな！
