「curvyCorners」は手軽に角丸ボックスを表現できるJavaScriptライブラリです。
divボックスのコーナー部分を丸くする手法は、Web2.0を意識したウェブサイトで多用されるデザインパターンとして定着した感があります。
しかし角丸ボックスをHTMLとCSSだけで表現するためには、コーナー部分のための背景画像を用意したり、その背景画像を表示させるために要素の入れ子を作ったりと、これがなかなか面倒です。
そういった面倒な作業抜きで、JavaScriptで角丸ボックスを実現してくれるのが「curvyCorners」。
このエントリーでは、「curvyCorners」のインストールから設定までの方法を説明していきます。
- サポートブラウザ : IE, Firefox, Safari, Google Chrome, Opera
- 使用ライブラリ : jquery.js, curvycorners.js
- 変更できる要素 : 角丸半径サイズ, アンチエイリアシングの有無
- ライセンス形式 : LGPL
- 記事で扱っているバージョン : 2.0.4
インストール
最初に使用するライブラリをダウンロードします。
必要なライブラリは以下の２つ。
この例では、jqueryは「jquery-1.3.2.min.js」を、curvyCornersはダウンロードしたファイルを展開した中にある「curvycorners.js」を使用します。
jqueryなどのライブラリでは、コードを圧縮したものなどのファイル名が違う別バージョンが配布されていることがあります。
どれを使えばいいの？という方には、jQuery 1.3.2 日本語リファレンスが参考になると思います。
２つのライブラリをサーバにアップロードした後、HTMLの <head> セクションにライブラリの場所を記述します。
次に、CSSとJavaScriptコードを記述します。
この部分は、ダウンロードしたcurvyCornersファイルを展開した中にあるデモを参考に。
- 記述例
<head>
<script src="../js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/curvycorners.js" type="text/javascript" charset="utf-8"></script><!----- JavaScript ----->
<script type="text/javascript">
$(function() {
var settings = {
tl: { radius: 5 }, /* 左上角の半径 */
tr: { radius: 5 }, /* 右上角の半径 */
bl: { radius: 5 }, /* 左下角の半径 */
br: { radius: 5 }, /* 右下角の半径 */
antiAlias: true /* アンチエイリアスの有無 true (あり) / false (なし) */
};
curvyCorners(settings, "#myDiv");
});
</script><!----- CSS ----->
<style type="text/css">
#myDiv {
width:50%;
margin:0 auto 30px auto;
padding:3em;
border:2px solid #333;
background-color:#c6c6c6;
-moz-border-radius:0.25em;
-webkit-border-radius:0.25em;;
}
</style>
</head>
<body>
<div id="myDiv">
コンテンツ
</div>
・
・
・
</body>
JavaScript部分の設定
- tl,tr,bl,br
左からそれぞれ、左上、右上、左下、右下の角丸半径を数値で指定。
単位はピクセルで、0を指定すると丸みがなくなります。
- antiAlias
アンチエイリアシングの有無。
アンチエイリアスをかけると、エッジ部分がなめらかに表示されます。
true : アンチエイリアスあり
false : アンチエイリアスなし
- curvyCorners(settings, "適用したい要素のidまたはclass名");
角丸にしたいdivボックスのid、またはclass名を赤字の部分に記述。
idの場合は"#(id名)"、classの場合は".(class名)"というように、それぞれハッシュ(#)とピリオド(.)を付けます。
CSS部分のポイント
CSSではボーダーの有無や背景色などを指定します。
ボーダーの形式はsolidのみ有効です。
また、ボックスに背景画像を使用した場合でも角丸表示は有効なので、写真の見せ方にちょっとスパイスが欲しいときなど便利かもしれません。
curvyCornersはもちろんJavaScriptがオフの状態では効きません。
そういう状況のためのセーフティーネットとして、いくつかのブラウザで独自プロパティとして先行実装されているborder-radiusを指定しておきます。
対応しているウェブブラウザごとにプロパティ名が違うので、注意してください。
- -moz-border-radius
Firefox向け。
- -webkit-border-radius
webkitレンダリングエンジンを搭載したウェブブラウザ向け。
Safari、Google Chromeなど。
上記プロパティに対応しているウェブブラウザではJavaScriptがオフの状態でもCSSの指定が効いて角丸が保持されますが、IEやOperaではコーナーは角のまま表示されることになります。
適用するボックスの記述
角丸にさせたいdivボックスに、idまたはclass名を指定します。
JavaScriptとCSSで指定した名前と合っているかどうかチェックするのを忘れずに。
これで設定完了です。
curvyCornersに含まれているデモやこちらのサンプルページを参考にカスタマイズしてみてください。
自分へのメモ
- curvyCornersを使用すると画像を使わず角丸ボックスを表現できる。
- 既存のページに適用する場合もそれほど手間がかからない。
- radius分だけボックス幅が広がる。
- 適用後はかなりの数のdiv要素が入れ子状に追加される。
- radiusを大きくするほど、適用する要素が増えるほど処理に時間がかかるようになる。
