「なかなか手が回ってないし、実際あまり手がかけられないけど、少しはサイトの見ばえを向上させたい」
とか思っていろいろ調べている途上で、とてもタイムリーな記事が1月11日に出ていたのに気付きました。
CSSで罫線を角丸で表示する（１）：FirefoxとSafariのCSS徹底検証 - builder by ZDNet Japan
「四隅に丸みをもった表組み」などを実現するには、基本的には四隅の丸い部分の専用画像パーツを用意するしかないのですが、リンク先に解説されている手法を用いれば、次の３つの環境（現時点の実用上は２つの環境)において「角が丸まった表示」が簡単に実現できます。
・Firefox (現行の2.0で可能)
・Safari (Safari 3で同様機能が実装されたことが昨年末に発表された)。
・将来のcssにおいて、この機能が公式化され、多くのブラウザが共通のコードで「角を丸める」表示に対応する可能性がある。(css 3の提案)
具体的に指定するコードは(試験的実装であるがゆえに)異なっていますが、
-webkit-border-radius: 20px; (Safari用)
-moz-border-radius: 20px; (Firefox用)
border-radius: 20px; (css 3)
……のように３つとも指定しておけば、Firefox(現行の2.0x以降)、Safari 3、および「将来の多くのバージョンのブラウザ」で同じように角が丸まって表示される、ということになります。
そういうわけで1月14日以降、当サイトでは上記解説に基づいて、下記の部分に「角を丸める」スタイルシート指定を試験的に使用しています。
・ほぼ全ページ最上部に設置している共通パネル部分
・もともと「Mozilla系ブラウザでの表示時に最適化」が前提の「Firefox, Mozilla, Opera... Users' Page(旧FNSCAPE)」トップページの見出し類。
ただしInternet Explorerでは(特に実害がないことも確認ずみではありますが)実際に角が丸まって見えることはなく、したがって、だいぶ印象が違って見えるということになります。（すみません……）
