RICOを使ってボックスの角を丸める

MovableTypeなどのブログを見ているとよくエントリーを入れているボックスの角がまるい。
角が直角なのと丸いのとでエントリーの内容の価値が(理論的には)変わるわけもないのだが、なんとなく、角が丸い方が、居心地がいい!気がします。

そこでわたしも角丸に挑戦、と思いgoogleで検索してみたのですが、 CSSを使って角を丸める場合、あまり美しい方法がない。
そこでCSSではなく、JavaScriptを使って丸める方向で再検討したところ、 rico.jsを使って角を丸める方法があることをしったので早速ためしてみました。

必要なもの

これらをダウンロードして、./js/ に入れておきます。

実装方法

その上で、HTMLのヘッダエレメントに以下の内容を追加。

<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/rico.js"></script>
<script type="text/javascript">
<!--
function roundRect(){
    Rico.Corner.round("roundBox",{corners:"all",bgColor:"#999"});
}
-->
</script>

roundRect()ファンクションは、このHTMLが表示された時点で呼び出されてほしいので、

<body onload="roundRect()">

としておきます。

あとは、実際に角を丸めたいエレメントをID指定します。ここでは、roundBox というエレメントIDを指定しているので、

<div id="roundBox">
このエレメントの角が丸くなります。
</div>

のように記述すれば完成。

まとめ

rico.jsは、すばらしいです。ただ、prototype.jsとrico.jsを(初回だけとはいえ)ダウンロードさせることになるので、表示スピードが遅くなるんじゃないかという心配があります。画像でコーナーを丸くしても、やはりその画像をダウンロードさせる分遅くなるので、たいした違いはないのかもしれませんが。 (もちろん、JavaScriptがOFFの場合はこの効果が発揮できないという、画像で丸める場合に比べた大きなdisadvantageがあります。)

rico.jspによる利点

HTMLソースコードの修正が少しで、角を丸められる

角を丸める利点

丸めることによって限られたスペースを広く使えることが判明

これは意外だったのですが、ボックスの角を丸めることで、ボックス同士のスペースが少なくても (丸めない場合と比較して)窮屈感が出ません。
したがってコンテンツを狭いスペースに詰め込む場合は、角を丸めるのは非常に有効なテクニックではないかと。