8月 24 2010

クロスブラウザチェックと角丸—(2)

クロスブラウザチェックと角丸—(1)で書きましたが、ブラウザ使用率はまたCSS3未対応のIE6・IE7が多いみたいです。

ボックスの角を丸くするCSS3の説明なんですが、参考にするサイトを決めました。

参考サイト：All About　画像を使わずにCSSだけで角を丸くする方法　http://allabout.co.jp/gm/gc/24004/3/

ページを見てもらうと、色々なCSSコードがありますよね。まだCSS3に完全対応しているブラウザは無いのです。なので….

Safari・Google Chrome向けの”-webkit-”・Firefox向けの”-moz-”付きコードと、CSS3コード

が、あるのです。其々のブラウザでの独自対応….だと思うのですが….

そこでTwitterで見つけたサイトに紹介されていたものの中で、お気に入りのボックスを角丸にするコードを作りだすジェネレーターをご紹介します。

ボックスのような物の四隅に数字(角の丸の大きさ)を入力するだけで、-webkit-・moz-・CSS3のコードが出てきますのでスタイルシートにコピペすれば良いのです。

でも、参考サイトの様に上の角だけ丸くする、下の角だけ丸くするといったコードを作ってブラウザチェックすると上手く表示できません。こんな角丸に対応しているのは、Safari・Google Chrome・Firefoxだけなのです。IE8では四角となっていました。

Webサイトを作る時って、ブラウザチェックしますよね。Safari・Google Chrome・Firefoxだけがきちんと見れて、使用率の高いIEでは違ったデザインを見せる….これはダメですよね。でもIEでも角丸が見れるように出来る事がTwitterで発見しました。

coliss　たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE　http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html

サイトディレクトリにファイルを設置し、CSSの角丸コードの最後に1行追加でIE6～8をCSS3に対応出来るそうなんです。

IE8で確認してみると…..良い感じに出来ています。

でも、ActiveXの質問バーが出てきました。自分のブラウザの設定のせいなのかな….?

一般の方がサイトを見に来られて、いきなりActiveXの質問バーが出てきたら….バーが表示されている間は角ばったデザインのまま….

となると、ボックスの角丸は画像を使うのが良いのではないでしょうか？pageというdiv要素を作り、pageプロパティ内で背景画像として四隅に角丸画像の配置….古い考えかもしれませんが….

IE6・IE7・IE8の使用率が減るか、CSS3対応のアップデート(あるかなぁ…疑問です)されたら、CSS3角丸コードを使用しても良いのではないでしょうか？素人に毛の生えた自分の思いですが….

画像を使わずにボックスの角を丸くする、ドロップシャドーを付ける….などなどCSS3では今まで画像で行ってきた事がコード一つで出来る様になるのは良い事だと思います。

新しい物好きなので色々と試していますが、少しの間(だと思うけど….)古い方法で角丸を作っていこうかと思います。

ご意見・ご指摘・アドバイスを頂けたら嬉しいです。