このページの本文へ

前へ 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. 2016年話題になったWeb&UXデザイン関連記事ベスト20、気になる1位は…? 9
  2. 2016年話題になったマーケティング関連記事ベスト20、1位はやっぱり…… 8
  3. WordPressのトラブルを解決!一歩上の開発者を目指すハンズオンセミナー 2
  4. スマホでVR体験できる、医療テクノロジーカンファレンス開催 2
  5. 【週末まとめ読み】デザイナーがNW.jsでデスクトップアプリをお手軽に作る 1
  6. 商業写真で首切りと串刺しがダメな理由 2322
  7. 明朝体は絶滅するのか? AXIS Font生みの親の挑戦 2079
  8. Apple Musicが流行らない理由をユーザー視点で考えてみた 1015
  9. Sketch 3を使う3つの理由と10の魅力 629
  10. いまさら聞けないSVG——Web制作に便利な3つの理由 591
  11. Facebook、Twitter、はてなブックマークでのエンゲージメント数をもとに算出
最新記事

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

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

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

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