Home> javascript > jQueryで角丸
jQueryで角丸
- 2010年3月10日 00:48
- javascript
JQuery Corner でボックスの角っこを丸くする。
手順
head要素の中で jQuery と jQuery Corner を読み込む。
<script type="text/javascript" src="http://www.d-improvement.jp/notebook/sample/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.d-improvement.jp/notebook/sample/jquery.corner.js"></script>
角丸にしたい対象（HTML要素、id属性、class属性）に、角丸の大きさを指定する。head要素の中で指定する場合は、以下のように。
<script type="text/javascript">
$(document).ready(function(){
$("#type1").corner("5px");
});
</script>
...
<body>
...
<div id="type1"> ... </div>
<!-- ↑このブロック要素が角丸になる -->
注意したいこと
- classで指定した方が効率的な場合があるが、読み込みが重くなる恐れがあるので、なるべくidで指定する。
- 参照: jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
Home> javascript > jQueryで角丸
- カテゴリ
- アーカイブ
- 購読
- Powerd By
-
