このページの本文へ

前へ 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. SEOはもう不要? それでもいまやるべきSEOの基本がわかる記事まとめ 51
  2. 用途別!WordPressプラグイン選びに迷ったら参考になる記事まとめ 17
  3. これから使い始めたいWebフォント&Google Font活用法まとめ 14
  4. 【週末まとめ読み】Bootstrapはもう古い!? 最新CSSフレームワークを試してみた 7
  5. もっと速く! Web制作の生産性ぐっと引き上げる最新便利ツールまとめ 7
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. アダルト検索エンジン「Boodigo」が公開 - 元Google社員ら立ち上げ 1587
  9. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  10. 3限目:「看板」から学ぶ「見出し」の基本設計とは!? 640
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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

ランキング