2011.07.01
企業サイトでも、サイトマップなどでは特に
CSS3で角丸にしてたりするのをみかけるので
重い腰をあげてそろそろCSS3を使用していこうと思い、
IE(6~8)にもCSS3の角丸やグラデーションを適用してくれる「CSS3 PIE」を使用してみました。
使用するには、
まず下記より「PIE.htc」をダウンロードし所定の位置に保存。
»CSS3 PIE
後はCSSに
「behavior: url(/パス/PIE.htc); 」
と追加するだけです。
※ 読み込まなかった経験はないですが、http://~始まる絶対パスを記述しても反応しないこともあるそうです。
div{ border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; behavior: url(/PIE.htc); ←これを追加するだけ }
WordPressで使用する場合は、
behavior: url(/wp-content/themes/テーマ名/PIE.htc);
という風に簡単に使用できます。
CSS3 PIEを適用している要素の背景などが
きちんと表示されない場合はさらにその要素に
position:relative;
を追加することで回避できます。
また、下記のように個別に指定しても反応しないようです。
border-top-right-radius: 10px;
CSS グラデーションを使用する際は
-pie-background: linear-gradient(top,#FFF,#999);
という風に頭に「-pie-」を追加したものを追加しましょう。つけないと反応しないことが多かったです。
しかし、ie9はCSS グラデーションに対応していませんので別の対策が必要です。
各ブラウザのCSS3の対応状況は下記で確認できます。
»findmebyip|HTML5 & CSS3 Support
色々試している途中ですし
まだまだ他にも問題がでてくると思いますが
背景画像などとうまく組み合わせて
かっこよく使用してみたいと思います。
次はトグル処理を試したいと思ってます。
https://dis.ne.jp/blog/topics/3620.html/trackback