skuare.net

角丸を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」

関連記事

• 角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」
• jQueryベースの角丸javascript「JQuery Curvy Corners」
• jQueryベースの角丸javascript「jQuery Corner」
• JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
• でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」

人気記事

最新記事RSS

• JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
• でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」
• mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
• これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
• MVPenでアナログの良さを考え直す。
• 第3回「マネタイズHACKS」に参加してみた。
• div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
• jQueryでメニューをわかりやすくする「Side Navigation Tooltip / Popup Bubble」
• 入力を促す文字をフォームに表示するJavaScript「JQUERY.FIELDTAG.JS」
• iPhoneライクにスクロールさせるJavaScript「OverScroll」