« 「誰でも読める会議室」近日スタート予定 | メイン | 【新製品】Panasonic レッツノート2008年 春モデルモバイル4機種[Y/W/T/R] »

cssで罫線の角を丸めてみました(for Firefox, Safari 3 only)

「なかなか手が回ってないし、実際あまり手がかけられないけど、少しはサイトの見ばえを向上させたい」
 とか思っていろいろ調べている途上で、とてもタイムリーな記事が1月11日に出ていたのに気付きました。
CSSで罫線を角丸で表示する(1):FirefoxとSafariのCSS徹底検証 - builder by ZDNet Japan
 「四隅に丸みをもった表組み」などを実現するには、基本的には四隅の丸い部分の専用画像パーツを用意するしかないのですが、リンク先に解説されている手法を用いれば、次の3つの環境(現時点の実用上は2つの環境)において「角が丸まった表示」が簡単に実現できます。

・Firefox (現行の2.0で可能)
・Safari (Safari 3で同様機能が実装されたことが昨年末に発表された)。
・将来のcssにおいて、この機能が公式化され、多くのブラウザが共通のコードで「角を丸める」表示に対応する可能性がある。(css 3の提案)

Ci080119121801.jpg

 具体的に指定するコードは(試験的実装であるがゆえに)異なっていますが、
-webkit-border-radius: 20px; (Safari用)
-moz-border-radius: 20px; (Firefox用)
border-radius: 20px; (css 3)
 ……のように3つとも指定しておけば、Firefox(現行の2.0x以降)、Safari 3、および「将来の多くのバージョンのブラウザ」で同じように角が丸まって表示される、ということになります。

 そういうわけで1月14日以降、当サイトでは上記解説に基づいて、下記の部分に「角を丸める」スタイルシート指定を試験的に使用しています。
・ほぼ全ページ最上部に設置している共通パネル部分
・もともと「Mozilla系ブラウザでの表示時に最適化」が前提の「Firefox, Mozilla, Opera... Users' Page(旧FNSCAPE)」トップページの見出し類。
 ただしInternet Explorerでは(特に実害がないことも確認ずみではありますが)実際に角が丸まって見えることはなく、したがって、だいぶ印象が違って見えるということになります。(すみません……)

トラックバック

このエントリーのトラックバックURL:
http://fpcu.on.coocan.jp/mt/mt-tb.cgi/3346

This site is powered by Six Apart
Movable Type 3.33-ja