CSS3プロパティ

CSS3プロパティをすべてのブラウザに対応させる

CSS3のプロパティは、HTML5と同様、全てのブラウザ・バージョンで対応しているわけではありません。（HTML5、CSS3サポート状況）

見ればわかる通り、IEは9ですらが、text-shadow,animation,gradientsといった比較的よく使用するプロパティにすら対応できていません。

そのため、サポートされていないブラウザに対応させるというか見た目だけでもそれに近いものを表現させるファイルが、PIE.htcです。

ダウンロード後、解凍して適当なディレクトリに設置、適用したいスタイルシートに下記の文を追加し、ファイル自体はurlのパスで読み込むというもの。

/* CSS */
behavior:url(PIE.htc);
position:relative;

ただし、このファイルがサポートしているのは、

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

のみということですので、text-shadowのようなサポートされていないプロパティを指定するとシャドウではなく背景が全て灰色になったりします。

そのため、当分の間は単一のCSSファイルで共通して使えるCSS3プロパティは上記5個にしておき、それ以外のプロパティ利用の際は、IE9以下はこのCSS、それ以外はこのCSSといった具合にスタイルシート自体をブラウザによって切り替えることをおすすめします。

box-shadow

box-shadowのプロパティ値は、以下のようになります。

/* CSS */
p {
	box-shadow:10px 20px 30px #000; //右に10pxの黒の影、下に20pxの黒の影、box周りに30pxのぼかし
	}

ためしにサンプルをCSSプロパティを使って改変してみます。

CSSプロパティの値を自分で設定するのは（グラデーションとかは特に）めんどうなので、ジェネレータを使用します。→ジェネレータのリスト。

box-shadowを使えば1pxのデザインも簡単にできます。（zuruiデザインテクニック）

他にもこれを使わずにこの2px線を作る方法はこちらへ。

border-radius

/* CSS */
h2 {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;　/* border-radius:0 0 0 0;は左上 右上 右下 左下を指定できる */
	behavior:url(PIE.htc);
	position:relative;
	}

h2要素に対してborder-radiusを指定してみました。border-radiusをtableに指定する場合、tableにborder-collapseを指定しているとうまく丸まりません。

-moz-とか-webkit-というのは、ベンダープレフィックスといってブラウザが試験実装or独自実装しているプロパティであることを示します。-moz-はFirefox、-o-はOpera、-ms-はIE、-webkit-はSafariとChromeです。

その下にベンダープレフィックス抜きの記述があるのは、正式にそのプロパティが実装になったときにベンダープレフィックス入りの記述が使えなくなってしまうことを防止する策です。

この記述でサンプルの表示がもし変わらなければ、それはIEの8以下でかつ、PIE.htcがうまく読み込めていない可能性が高いですね。

PIE.htcのパスの設定については、ググると沢山出てきます。このパスは基本的にcssファイルからpie.htcへのパスではなく、スタイルが適用されるhtmlファイルからpie.htcへのパスであることに注意です。

/* CSS */
behavior:url(https://www.nkdesk.com/PIE.htc);
position:relative;

上のように相対パスでなく、絶対パスで読み込むほうが間違いないかもしれません。ただし、phpファイルをlocalホストで読み込む環境（自分）では絶対パスだと上手く反映しません（アップすれば反映します）。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>