ちょっと見た目を改善しよう、ということで、DIVで作っている枠線を角丸にしてみることにします。
画像を使う方法、CSSとJavaScriptで実現する方法があります。前者は色や丸みを変えたりするのが大変なので、今回は後者の方法を使います(画像よりも重くなりがちですが)。
角丸の枠を作ってくれるものとしては Nifty Corners CubeとかRoundedCornrといったものがありますが、今回はCurvy Cornersを使ってみます。角丸化をJavaScriptだけで実現しており、CSSも不要、アンチエイリアスにも対応など、高機能。
上記サイトから最新版をダウンロードし、rounded_corners_lite.inc を public/javascripts/ 内に入れます。そして、使いたいページに
<%= javascript_include_tag('rounded_corners_lite.inc.js') %>
を挿入します。が今回は手抜きして app/view/layouts/application.rhtml に入れてしまいました(使わないページでも実行されてしまいますが)。
これに加えて、下記のJavaScriptも同フォルダにrounded.jsとして保存し、上記と同様に各ページに読み込ませます。
window.onload = function() { round_settings = { tl: { radius: 8 }, tr: { radius: 8 }, bl: { radius: 8 }, br: { radius: 8 }, antiAlias: true, autoPad: true } var divObjs = document.getElementsByTagName("div"); for (var i = 0; i < divObjs.length; i++) { if (divObjs[i].className == "round") { var cornersObj = new curvyCorners(round_settings, divObjs[i]); cornersObj.applyCornersToAll(); } } }
これで、div要素のうち、class名が"round"のものが全て角丸になります。
追記:DOCTYPE宣言をしておかないと、IEでは表示が崩れてしまう模様。
RoRならlayouts/application.rhtmlで宣言しておくと吉かと。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
もしくは厳密型で
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">