このページの本文へ

前へ 1 2 3 次へ

背景も枠線も自由自在

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は以下のアドレスでダウンロードできます。

 http://www.curvycorners.net/

 ダウンロードした圧縮ファイルを展開すると、ライブラリ本体「curvycorners.js」とデモのHTMLファイルなどが現れます。このうち、「curvycorners.js」だけを使用したいWebサーバーにアップロードしてください。

 次に、curvyCornersを組み込みたいWebページ(HTML)のヘッダー部分に、以下の1行を追加します。


■HTMLのヘッダー部分に追加する行


<script type="text/javascript" src="http://アップロード先/curvycorners.js"></script>

前へ 1 2 3 次へ

ソーシャルランキング
  1. コンテンツマーケ時代の必読書『Webコピーライティング教室』予約受付中 238
  2. 全部知ってる?今後のサイト制作で押さえたいCSSの最新プロパティ9選 172
  3. 失敗しないユーザーインタビューの実践方法 126
  4. Dreamweaverがドリっと大進化、Brackets採用で生まれ変わる 90
  5. カゴメ、デジタルマーケティング基盤をSITE PUBLIS 4に統合へ 12
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. なぜいまさら「ブログ」なの?KDDIウェブに聞く新サービスの狙い 1607
  9. LINE、運用型広告へ参入 1592
  10. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング