背景も枠線も自由自在
3分でできるJS＋CSS「角丸」テクニック
2009年05月13日 11時00分更新
JavaScriptを追加する
HTMLを組んだら、次は要素の角を丸くするためにJavaScriptを追加します。基本的な書き方は、以下のとおりです。
■curvyCornersのJavaScriptの書き方
var settings = {
tl : { radius : 左上の角の半径 },
tr : { radius : 右上の角の半径 },
bl : { radius : 左下の角の半径 },
br : { radius : 右下の角の半径 },
antiAlias : true
};
curvyCorners(settings, 対象の要素);
var settings = { …… }; の部分で、四隅の角の半径を指定します。単位はピクセルで、0を指定するとその角は丸くなりません。たとえば、左上と右上の角の半径を10ピクセルにし、左下と右下は角を丸くしない場合は、以下のように書きます。
■左上・右上だけ半径10ピクセルの角丸に加工する
var settings = {
tl : { radius : 10 },
tr : { radius : 10 },
bl : { radius : 0 },
br : { radius : 0 },
antiAlias : true
};
 |
|---|
| 左上と右上の角だけ丸くした例 |
スクリプトの最後、 curvyCorners(settings, 対象の要素); の文で、要素の角を丸くします。対象となる要素は、CSSのセレクターふうに、「#」や「.」の記号を使って表します。たとえば、ID名「test_b」の要素なら '#test_b' 、クラス名「curvy」の要素は '.curvy' となります。
なお、curvyCornersを利用する際は、角の半径を大きくするほど、また角を丸くする要素を多くするほど、処理に時間がかかります。多用する際は気をつけましょう。
◆
今回ご紹介した画面サンプルは、それぞれ以下のアドレスで公開しました。具体的なコードの書き方は、これらのサンプルページのソースを参照してください。
http://www.h-fj.com/ascii/curvycorners/sample1.html
http://www.h-fj.com/ascii/curvycorners/sample2.html
http://www.h-fj.com/ascii/curvycorners/sample3.html
http://www.h-fj.com/ascii/curvycorners/sample4.html
また、以下のページでは、これらのサンプルを一度にチェックできます。併せて参考にしてください。
http://www.h-fj.com/ascii/curvycorners/sample.html
