備忘録。WEB制作でよく使うCSS3のベンダープレフィックスについてまとめました。
モダンブラウザは最新版であることが前提です。
boder-radius
1 2 3 |
.hoge { border-radius: 3px; } |
モダンブラウザはすでにサポート済み。
IE9+。
スマホもOK。
box-shadow
1 2 3 4 |
.hoge { -webkit-box-shadow: 1px 1px 1px black; /*Android3.0以前*/ box-shadow: 1px 1px 1px black; } |
-webkitはAndroid3.0以前対応。
モダンブラウザはサポート済み。
IE9+。
linear-gradient
1 2 3 4 5 |
.hoge { background : -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000)) ; /*旧構文*/ /*Safari, iOS対応*/ background : -webkit-linear-gradient(top, #fff, #000) ; /*toなしの旧構文*/ /*Android3.0以前*/ background : linear-gradient(to bottom, #fff, #000) ; /*最終構文*/ } |
-webkit-gradientは当初webkitで使われていた構文。最近SafariとiOSが新しくしたので念のため。
-webkit-linear-gradientはAndroid3.0以前対応。
モダンブラウザはサポート済み。
IE10+。
CSS3 PIE
IE8以下(liner-gradientはIE9以下)で使いたかったらCSS3 PIEあたりで。
JavaScriptを使いIE6〜8でCSS3の表示を可能にするもの。
CSS3 PIEでファイルをダウンロードしてきたら解凍して「PIE.htc」を表示させたいサイトのディレクトリに配置。
1 2 3 4 |
.hoge { border-radius: 3px; behavior: url("/PIE.htc"); } |
beheviorプロパティを使用して上記のように記述。
必ず絶対パスで。
下記CSS3に適用可。
- border-radius
- box-shadow
- border-image
- multiple background images
- linear-gradient as background image

36歳のときにそれまで勤めていた金融業界を卒業、地に足の着いた生活がしたいと東京・渋谷から房総へ移住。Webデザイナー養成校に通い、40歳のときにWebデザイナーとして独立。地方在住・40歳・コネなしからスタートして、現在は仲間と会社を作るまでに成長。今の興味は資産形成とブロックチェーン。ビットコインのマイニングもやってます。