| Tips 5 | 多彩な角の装飾を簡単に実現したい | JavaScript |
| ＞＞ | point jQueryを使うので設定が簡単 | ||
| ＞＞ | point 画像の準備なしに手軽に装飾できる |
divなどの要素に簡単に角丸等の装飾を施すことができる、jQueryのプラグイン「JQuery Corner」（www.malsup.com/jquery/corner/）を紹介しよう。HTML内に余分な要素を足さず、画像を作成する必要もないので、非常に簡単に実装できる。
まずはjQuery最新版v.1.3.2（jquery.com）とJQuery Cornerの最新版（www.malsup.com/jquery/corner/jquery.corner.js）をダウンロードする。ふたつのjsファイルを、head要素内で読み込む【1】。
【1】head要素内に記入し、ふたつのjsファイルを読み込む
次に、装飾を施したいdiv要素等を用意し、jquery.corner.jsから利用するidかclass名をつけよう。サンプルでは9種類の装飾を実現するために「sample001」～「sample009」というidをつけているが、複数の要素に同じスタイルを反映させたい場合には、classにしておこう【2】。ここで用意したdiv要素などには、CSSでbackground-colorと角の装飾が隠れない程度のpaddingを指定しよう【3】。
【2】div要素などにidかclassを指定しよう
【3】background-colorとpaddingを忘れずに、あとは好みで指定する
最後に「$('id/class名').corner("xxxxx");」という形式で、装飾の種類を指定する。「round」、「bevel」、「notch」、「bite」、「cool」などさまざまなオプションが用意されているので、試してみよう【4】【5】。「$('id/class名').corner("dog top");」のように、「top」と指定すれば、上の角だけに装飾がつく。
【4】ここでは9種類の装飾を用意した
【5】このようになれば完成だ（▲クリックすると拡大します）
