jQueryで角丸を作るライブラリ jQuery Corner

Home
Archive
jQueryで角丸を作るライブラリ jQuery Corner

jQueryで角丸を作るライブラリ jQuery Corner

2007年07月19日
category:javascript
Comment(0)
Trackback(1)

コーディングするとき、角丸っていろいろと大変ですよね。今回はjQueryのライブラリで角丸を作成するものを紹介しようと思います。

ダウンロード

今回は角丸のみ紹介しますが、丸だけでなく色々な角を表現できるのがこのライブラリの特徴です。ダウンロードやデモ一覧は下記からどうぞ。
http://malsup.com/jquery/corner/

使い方

まずjQueryとダウンロードしてきたライブラリを読み込ます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="corner.js"></script>

読み込むとjQueryオブジェクトにcorner()というメソッドが追加されるので、これを使用して角丸を実現します。ここでは「cornerBox」というclassを指定したボックスを角丸にするようにしてみました。

$(function() {
  $("div.cornerBox").corner();
});

<div class="cornerBox">corner box1</div>

div.cornerBox {
  padding:20px;
  font-weight:bold;
  margin:10px 0;
  width:200px;
  color:#FFF;
  background:#009;
}

これを表示させると下記のようになります。

corner box1

javascriptとHTMLがとても短くて済むのがわかると思います。CSSも見やすいように指定しているだけで、なにも指定してしなくても角丸になります。

ちなみに背景画像も角丸になります。上記例のbackgroundを背景画像に変更するだけです。

corner box2

このライブラリで一番問題になるのがボックスにボーダーを指定したい場合です。角丸を適用したボックスはCSSのスタイルでボーダーを指定してもボーダーは無視されます。

しかし、配布元のデモページではボーダーがある例が掲載されています。どうやら、角丸を2つ入れ子にして外側のボックスのはみ出した部分をボーダーに見せるという、かなりの力技で実現されてました。

実際のコードは下記のようになります。cornerBox2というクラスを指定して要素を角丸にして、ボーダーっぽいやつも出るようにしました。

$(function() {
  $('div.cornerBox2').wrap('<div class="cornerWrap"></div>');
  $('div.cornerBox2').corner().parent().corner()
});

<div class="cornerBox3">corner box3</div>

div.cornerBox2 {
  padding:20px;
  color:#FFF;
  font-weight:bold;
  background:#009;
  width:200px;
}

div.cornerWrap {
  background:#C00;
  width:240px;
  padding:2px;
}

corner box3

ボーダーっぽく表示させるためにはCSSを指定しないとうまく表示されません。親ボックス（cornerWrap）のパディングがボーダーの太さ、背景色がボーダー色になります。この時、親ボックスのwidthは、子ボックスの幅と同じ大きさに指定しまます。今回の場合、子ボックスのパディングが40pxあるので240pxにしています。