DIVの枠線を角丸に

ちょっと見た目を改善しよう、ということで、DIVで作っている枠線を角丸にしてみることにします。
画像を使う方法、CSSJavaScriptで実現する方法があります。前者は色や丸みを変えたりするのが大変なので、今回は後者の方法を使います(画像よりも重くなりがちですが)。

角丸の枠を作ってくれるものとしては 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">