skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」

｜ ｜ ｜ ｜ ｜ ｜ ｜

サイトを作っていると角が四角いレイアウトが多くなり、角ばった印象を与えます。
そこで角をとる「角丸」が多く使用されますが、今回はそんな角丸をJavaScriptで簡単に実現します。
jQuery Cornersは流行のUJavaScriptライブラリ「jQuery」のプラグインです。

使用方法
jQuery Cornersからjquery.corners.jsを、jQueryからjquery.jsをダウンロードします。
<script type="text/javascript" src="http://yourdomain/jquery.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.corners.min.js"></script>
<script>
$(document).ready( function(){
$('角丸の要素').corners();
});
</script>
上記を記述したらあとは指定した要素を書き込めば完了です。
<div class="要素名">
角丸です
</div>
オプションで、角丸の大きさや、下だけ右だけなどの指定が可能です。
角丸をJavaScriptライブラリjQueryで作る「jQuery Corners」サンプル

記事作成：2008年10月28日

前の記事：タイムテーブルを作るJavaScript「today's timetable」
次の記事：1.3 KBの軽量アコーディオンJavaScript「JavaScript Accordion」