開発メモ/Web/CSS/IE6~8でもCSS3
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
*IE6~8でもCSS3 [#g926c8c7]
#contents
いろいろ方法があるようですが・・・~
Windows7の場合、IE6がないので、XPモードか[[Expression Web...
以下のブラウザで確認しています。
|ブラウザ|バージョン|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
| |
| +-xxx.css
| |
| +-PIE.htc ←ここはダメ
|
+-/sub
| |
| +-xxx.html
| |
| +-PIE.htc
|
+-xxx.html
|
+-PIE.htc
***PIE.htcのダウンロードと使い方 [#y7f1e0bd]
[[CSS3 PIE_ CSS3 decorations for IE>http://css3pie.com/]]...
そして、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 Su...
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 Su...
IE6だとちょっと描画が違いますね^^;
***グラデーション(linear-gradient) [#q60a8809]
グラデーションで色を塗ります。
#codeprettify{{
/* Chrome, Safari */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(...
/* 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 Su...
グラデーションの方向も変えることができます。~
#codeprettify{{
/* Chrome, Safari */
background: -webkit-gradient(linear, right 0, 0 0, from(#...
/* 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 Su...
***ドロップシャドウ(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 Su...
**参考 [#re14218e]
-[[たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS...
-[[IEでもCSS3 その2(PIE)>http://www.nandani.sakura.ne...
終了行:
*IE6~8でもCSS3 [#g926c8c7]
#contents
いろいろ方法があるようですが・・・~
Windows7の場合、IE6がないので、XPモードか[[Expression Web...
以下のブラウザで確認しています。
|ブラウザ|バージョン|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
| |
| +-xxx.css
| |
| +-PIE.htc ←ここはダメ
|
+-/sub
| |
| +-xxx.html
| |
| +-PIE.htc
|
+-xxx.html
|
+-PIE.htc
***PIE.htcのダウンロードと使い方 [#y7f1e0bd]
[[CSS3 PIE_ CSS3 decorations for IE>http://css3pie.com/]]...
そして、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 Su...
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 Su...
IE6だとちょっと描画が違いますね^^;
***グラデーション(linear-gradient) [#q60a8809]
グラデーションで色を塗ります。
#codeprettify{{
/* Chrome, Safari */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(...
/* 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 Su...
グラデーションの方向も変えることができます。~
#codeprettify{{
/* Chrome, Safari */
background: -webkit-gradient(linear, right 0, 0 0, from(#...
/* 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 Su...
***ドロップシャドウ(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 Su...
**参考 [#re14218e]
-[[たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS...
-[[IEでもCSS3 その2(PIE)>http://www.nandani.sakura.ne...
ページ名: