WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

ご相談はお気軽にどうぞ 03-5369-1878

月別アーカイブ: 9月 2011

○秘

CSS3×PIE.htc の記述ルール

カテゴリ:コーディングTips

2011年9月6日

前回の記事 で触れたjavascript (.htcファイル)「PIE.htc」。
今回はそのCSS3 PIE の記述ルールの備忘録。

まずは現時点で無難にクロスブラウザで使えるスタイルのおさらい。

・border-radius(ボックスに角丸をつける)
・box-shadow(ボックスに陰影をつける)
・border-image(境界線に画像を使う)
・multiple background images(背景に最大4つの画像を使用できる)
・linear-gradient as background image
(背景にグラデーションをつける)

基本の記述。

セレクタ {
CSS3プロパティ : 値 ;
CSS3プロパティ : 値 ;
CSS3プロパティ : 値 ;
: ;
: ;
position: relative;
behavior: url(“/PIE.htc”);
}

※ font や background などの色指定は、16進法で指定。(black や red などではなく「#●●●●●●」。)
※ position: relative; はおまじない的に常に表記しておいて損はナシ。

 

そして各プロパティの記述。

 

・border-radius プロパティ

-webkit-border-radius: ○○px; /* Safari, Chrome用 */
-moz-border-radius: ○○px; /* Firefox用 */
border-radius: ○○px; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

 

・box-shadow プロパティ

-webkit-box-shadow: #●●●●●● ○px ○px ○px; /* Safari, Chrome用 */
-moz-box-shadow: #●●●●●● ○px ○px ○px; /* Firefox用 */
box-shadow: #●●●●●● ○px ○px ○px; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

※ 「●」は、影の色。「○」は、左から”横方向のズレ”、”下方向のズレ”、”ぼかし具合”。「box-shadow: inset #●●●●●● ○px ○px ○px;」insetを追記することで、ボックスの内側に影ができる。

 

・border-image プロパティ

border: 1px solid #●●●●●●;
-webkit-border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* Safari, Chrome用 */
-moz-border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* Firefox用 */
border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

※ 「△」は”border-image-slice”の指定、「○」は”border-image-width”の指定。「repeat」は”border-image-repeat”の指定。その他”border-image-outset”の指定も可能。

 

・multiple background images プロパティ

background-image: url(“/images/●●●.jpg”), url(“/images/●●●.jpg”);
background-repeat: no-repeat, no-repeat;
background-position: ○○px center, ○○px center;
behavior: url(“/PIE.htc”);
-pie-background:
url(“/images/●●●.jpg”) no-repeat ○○px center,
url(“/images/●●●.jpg”) no-repeat ○○px center;
position: relative;
behavior: url(“/PIE.htc”);

 

・linear-gradient as background image プロパティ

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#●●●●●●), to(#●●●●●●)); /* Safari, Chrome用 */
background: -webkit-linear-gradient(#●●●●●●, #●●●●●●); /* Safari, Chrome用 */
background: -moz-linear-gradient(#●●●●●●, #●●●●●●); /* Firefox用 */
background: linear-gradient(#●●●●●●, #●●●●●●); /* CSS3草案 */
-pie-background:linear-gradient(#●●●●●●,#●●●●●●);
position: relative;
behavior: url(“/PIE.htc”);

※「●」は、グラデーション上部と下部の指定。

 

最後に先日の作業中に発見したのが、

・IE で filter を使ってグラデーションと角丸 を併用すると、グラデーションが効かない。
・『PIE.htc』IE7,8 box-shadowの「inset」には未対応?。

ただしWindows 7、IE9の開発モード環境のみでの確認だったので、他のOSやIE他のバージョンでは問題ないのかも……?
というか、そもそもWin7+IE9 環境はPIE.htcが効いてないような……?!

という訳で、
今後のPIE.htcバージョンアップで対応するのか?
はたまた現状でもじゅうぶんな対処法があるのか?
それともIE10 のリリースを待って、
IE9以下を全て排除するのか!?デキルのか!!??

WebCoding.jp 第1事業部 チーフ専属秘書
左門寺バーバラ久美子でした。

 

 

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2011年9月
« 8月   10月 »
 1234
567891011
12131415161718
19202122232425
2627282930  

アーカイブ