開発メモ/Web/CSS/IE6～8でもCSS3 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• 開発メモ/Web/CSS/IE6～8でもCSS3 へ行く。
• 開発メモ/Web/CSS/IE6～8でもCSS3 の差分を削除

*IE6～8でもCSS3 [#g926c8c7]
#contents

いろいろ方法があるようですが・・・~
Windows7の場合、IE6がないので、XPモードか[[Expression Web SuperPreview>http://www.microsoft.com/downloads/ja-jp/details.aspx?FamilyID=e6cc9b3e-7eab-4525-8322-14d7e267eb2c&displayLang=ja]]を導入することで確認できます。~
以下のブラウザで確認しています。
|ブラウザ|バージョン|h
|Internet Explorer|6(Expression Web SuperPreview)|
|Internet Explorer|9|
|FireFox|9.0.1|
|Safari|5.1.2|
|Chrome|17.0.963.56 m|
|Opera|11.61|

**PIE.htc [#j21fc74b]
角丸、ドロップシャドウ、グラデーション、ボーダー画像、マルチ背景画像を利用できるようになるようです。~
制限もあるようです。~
角丸、ドロップシャドウ、グラデーションは試してみたのでそのメモ。


***PIE.htcの置き場所 [#peb2e6fb]
PIE.htcは表示したいページと同じ場所になければなりません。~
というのも、現在のページを基準とするため、外部CSSで相対パスで指定した場合、パスがおかしくなります。~
具体的には、以下のように対置します。
 /
 |
 +-<css>
 +-/css
 | |
 | +-xxx.css
 | |
 | +-PIE.htc   ←ここはダメ
 |
 +-<sub>
 +-/sub
 | |
 | +-xxx.html
 | |
 | +-PIE.htc
 |
 +-xxx.html
 |
 +-PIE.htc
***PIE.htcのダウンロードと使い方 [#y7f1e0bd]
[[CSS3 PIE_ CSS3 decorations for IE>http://css3pie.com/]]で配布されているPIE.htcをダウンロードします。~
そして、CSS3を使いたいクラスに、以下の記述を追加します。~
#codeprettify{{  
behavior: url(PIE.htc);
}}

***角丸(border-radius) [#td9337b8]
境界線の角を丸くします。~
#codeprettify{{
/* border-radius:半径 */
border-radius: 15px;
behavior: url(PIE.htc);
}}

&ref(./css_001.png,80%);
~
＊左からIE9,Chrome,FireFox,Safari,Opera,Expression Web SuperPreviewのIE6~

PIEではborder-top-left-radiusなどの指定はできません。~
左上を指定する場合は
#codeprettify{{  
/* border-radius:左上 右上 右下 左下 */
border-radius: 15px 0 0 0;
behavior: url(PIE.htc);
}}
というように指定します。~
&ref(./css_002.png,80%);
~
＊左からIE9,Chrome,FireFox,Safari,Opera,Expression Web SuperPreviewのIE6~
IE6だとちょっと描画が違いますね^^;

***グラデーション(linear-gradient) [#q60a8809]
グラデーションで色を塗ります。
#codeprettify{{  
/* Chrome, Safari */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#AFAFFF), to(#000066));
/* FireFox */
background: -moz-linear-gradient(#AFAFFF, #000066);
/* Opera */
background: -o-linear-gradient(#AFAFFF, #000066);
/* IE6-9 linear-gradient(開始色, 終了色)*/
-pie-background: linear-gradient(#AFAFFF, #000066);
behavior: url(PIE.htc);
}}
&ref(./css_003.png,80%);~
＊左からIE9,Chrome,FireFox,Safari,Opera,Expression Web SuperPreviewのIE6~

グラデーションの方向も変えることができます。~
#codeprettify{{  
/* Chrome, Safari */
background: -webkit-gradient(linear, right 0, 0 0, from(#AFAFFF), to(#000066));
/* FireFox */
background: -moz-linear-gradient(right, #AFAFFF, #000066);
/* Opera */
background: -o-linear-gradient(right, #AFAFFF, #000066);
/* IE6-9 linear-gradient(方向, 開始色, 終了色)*/
-pie-background: linear-gradient(right, #AFAFFF, #000066);
behavior: url(PIE.htc);
}}
&ref(./css_004.png,80%);~
＊左からIE9,Chrome,FireFox,Safari,Opera,Expression Web SuperPreviewのIE6~

***ドロップシャドウ(box-shadow) [#v671d69e]
#codeprettify{{
/* Opera, IE6-9, FireFox 9.0.1, Safari 5.1.2 */
box-shadow: 5px 5px 8px #000;
behavior: url(PIE.htc);
}}
&ref(./css_005.png,80%);~
＊左からIE9,Chrome,FireFox,Safari,Opera,Expression Web SuperPreviewのIE6~

**参考 [#re14218e]
-[[たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE>http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html]]
-[[IEでもCSS3　その２（PIE）>http://www.nandani.sakura.ne.jp/web_all/html/308/]]