背景も枠線も自由自在
3分でできるJS＋CSS「角丸」テクニック
2009年05月13日 11時00分更新
 |
|---|
“Web2.0”っぽいWebデザインの定番、角丸ボックス。実際、ここ数年、サイドメニューやナビゲーションバーなどに角を丸くしたブロック要素を多用するサイトを目にする機会が増えています。
ところがこの角丸ボックス、（X）HTMLとCSSだけで実現するには、コーナー部分の背景画像を用意したりCSSを書き足したりと、意外に手間がかかって面倒です。現在、W3C（World Wide Web Consortium ）で策定が進められているCSS3（CSS level 3）では、ブロック要素の角を丸くできる border-radiusプロパティが追加される予定ですが、現在のところCSS3は一部のWebブラウザーしか対応していませんし、border-radiusプロパティの実装状況にもばらつきがあります（Firefoxの -moz-border-radius、Safariの -webkit-border-radius など、Webブラウザー独自の実装はあります）。
そこで、ブロック要素の角を丸くするのに最近よく使われているのが、JavaScriptを利用する方法です。さまざまなJavaScriptライブラリが公開されていますが、今回はその中から「curvyCorners」の使い方を紹介します。
curvyCornersのインストール
「curvyCorners」はCameron Cooke氏が開発したJavaScriptライブラリで、指定した任意のブロック要素の角を丸く加工する機能を持ちます。curvycorners.jsはjQueryなどの他のライブラリに依存せず、単体で動作するシンプルなライブラリなので導入は簡単です。
curvyCornersは以下のアドレスでダウンロードできます。
ダウンロードした圧縮ファイルを展開すると、ライブラリ本体「curvycorners.js」とデモのHTMLファイルなどが現れます。このうち、「curvycorners.js」だけを使用したいWebサーバーにアップロードしてください。
次に、curvyCornersを組み込みたいWebページ（HTML）のヘッダー部分に、以下の1行を追加します。
■HTMLのヘッダー部分に追加する行
<script type="text/javascript" src="http://アップロード先/curvycorners.js"></script>
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
