角丸ボックス
画像を使わずに、角丸のボックスを作る。Ricoを使います。
・・・今回はRailsの話じゃありません・・・
HTMLで角丸のボックスを作るのは、意外と大変です。特に縦横の可変幅のボックスを作ろうとすると、TABLEやDIVがめちゃくちゃな入れ子になってしまい、メンテナンス不能になるときがママあります（これで昔えらい目にあったことがあります）。
Ricoを使うと、煩わしさゼロで、JavaScriptとStylesheetですっきりと角丸ボックスが作れます。その紹介です。
やりかた
Ricoとprototype.jsからJavaScriptファイルをダウンロードして、自サイトに読み込みます。
<script src="prototype.js" type="text/javascript"></script>
<script src="rico.js" type="text/javascript"></script>
window.onloadで、スタイルシートのclassを作成します。
window.onload=function(){
new Rico.Effect.Round( null, 'roundCornerBox' );
}
作成したclassで、HTMLを記述します。
<div style="background-color:#ff0000;" class="roundCornerBox">
赤の角丸ボックスができるはず。
</div>
これでOKです。
bodyなどの背景色が白じゃない場合は、ちょっと注意。IEだとそのままでOKなのですが、Geckoの場合はroundCornerBoxに背景色を指定しないと角が白抜きになってしまいます。そのときは、
new Rico.Effect.Round( null, 'roundCornerBox', {bgColor:#0000ff} );
//bodyの色が#0000ffの場合
と、指定できます。
理屈的には
Nifty Cornersという記事を読んでください。
恩恵を受けている身で言うのもなんですが、変なこと考える人がいるんですね。
Rico
Ricoは、もっとたくさんの機能があるAjaxライブラリです。アコーディオンパネルや、DOMオブジェクトのアニメーション、ドラッグアンドドロップなど、デモページ触ってるだけでちょっと楽しいです。
ちなみに、武田ソフトのサイトは、最初はRicoのサイトをマネしようとして作り始めました。しつこいくらいに丸っこくなってるのは、そのためです。アニメーションも、ちょっと使ってます。
