[JS]IE8 以下で角丸を使えるjQuery プラグイン「jQuery curvyCorners」
スポンサード
※バージョンは、2013年現在で最新版である2.1.1 を利用します。
続いてHTML、CSS ファイルの記述例はこんな感じです。
以下のデモページで角丸を確認できます。
jQuery curvyCorners による基本的な角丸 のデモ
「左上、右上のみ角丸を適用させたい」
という場合は、以下のように記述します。
角丸を指定する場所には {
※false にすることで正常に表示されない場合は、{
四隅に個別に角丸を適用させるデモ
背景画像の四隅に20px の角丸を適用させる場合は、以下のようなjavascript の記述をした上で、
.box 要素の背景に画像を指定します。
↓こんな感じで表示されます。
背景画像に角丸処理用させるデモ
スポンサード
CSS3 の border-radius を使えば簡単に角丸を実現できますが、CSS3 が対応していないIE8 以下でも角丸を使えるようにするjQuery プラグインが「jQuery curvyCorners」です。
jQuery curvyCorners は要素の四隅の半径を個別に指定できるだけでなく、背景画像に対しても角丸を適用させることができますので、
個人的には、IE9 とその他のモダンブラウザにはCSS3 の border-radius で角丸を指定した上で、IE8 やIE7 でも角丸に対応しないといけない…という場合にだけjQuery curvyCorners を利用しています。
jQuery curvyCorners ダウンロード
以下のページより jQuery curvyCorners のファイルをダウンロードします。※バージョンは、2013年現在で最新版である2.1.1 を利用します。
jQuery curvyCorners の設置
<head> 内にcurvycorners.src.js ファイルを設置します。<!--[if lt IE 9]> <script src="./curvycorners.src.js"></script> <script> curvyCorners.addEvent(window, 'load', initCorners); function initCorners() { var settings = { tl: { radius: 10 }, tr: { radius: 10 }, bl: { radius: 10 }, br: { radius: 10 }, antiAlias: true } curvyCorners(settings, ".box"); } </script> <![endif]-->この場合、
box
の要素に対して四隅に10px の角丸を適用させることになります。続いてHTML、CSS ファイルの記述例はこんな感じです。
<style> .box { background:#dd0000; color:#fff; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } .box p { padding:20px 10px; text-align:center; } </style> <div class="box"><p>角丸にします。</p></div>jQuery curvyCorners はIE8 以下に適用させるようにしていますので、CSS ファイル内で.box 要素にも同じ半径だけ
border-radius
を指定しています。以下のデモページで角丸を確認できます。
jQuery curvyCorners による基本的な角丸 のデモ
jQuery curvyCorners で個別の角丸処理
要素の四隅の角丸の大きさ(半径)は自由に変更できますので、「左上、右上のみ角丸を適用させたい」
という場合は、以下のように記述します。
<!--[if lt IE 9]> <script src="./curvycorners.src.js"></script> <script> curvyCorners.addEvent(window, 'load', initCorners); function initCorners() { var settings = { tl: {radius: 30 }, tr: {radius: 30 }, bl: false, br: false, antiAlias: true, autoPad: true, } curvyCorners(settings, ".box"); } </script> <![endif]-->「tl」「tr」「bl」「br」など、各種オプションは以下の通りとなっています。
tl | 左上の半径 |
---|---|
tr | 右上の半径 |
bl | 左下の半径 |
br | 右下の半径 |
antiAlias | アンチエイリアス設定 |
autoPad | パディング設定 |
角丸を指定する場所には {
radius:半径
} を記述し、角丸を指定しない場所は false
にします。※false にすることで正常に表示されない場合は、{
radius: 0
} にします。四隅に個別に角丸を適用させるデモ
背景画像に角丸処理
background-image で指定した背景画像にも角丸を適用できます。背景画像の四隅に20px の角丸を適用させる場合は、以下のようなjavascript の記述をした上で、
<!--[if lt IE 9]> <script src="./curvycorners.src.js"></script> <script> curvyCorners.addEvent(window, 'load', initCorners); function initCorners() { var settings = { tl: { radius: 20 }, tr: { radius: 20 }, bl: { radius: 20 }, br: { radius: 20 }, antiAlias: true } curvyCorners(settings, ".box"); } </script> <![endif]-->
.box 要素の背景に画像を指定します。
<style> .box { background:url(./images.jpg) no-repeat top center; width:640px; height:480px; text-align:center; margin:0 auto; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; } </style> <div class="box"></div>
↓こんな感じで表示されます。
背景画像に角丸処理用させるデモ
スポンサード
コメント