こちらも、同名のプラグインがあるみたいだけど、今回使ってみたのは、こちらです。かなり、自由度の高い、角丸を作ってくれるプラグインです。
本サイト
使い方は、いたってシンプルで、まず、<script>で、ダウンロードしたプラグインを読み込んだら…
html
<div class="corner"> <h5>コーナー</h5> <div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div> </div>
こんな感じで、htmlを書く。
次は、
js
$(function(){
$(".corner").corner();
});
こんな感じで、実行すればOK。
オプションもたくさん用意されていて、色々なタイプの角丸(角が丸くなるだけじゃないオプションもある。)が作れる。
とっても便利でしょう。
ただひとつ注意点は、このプラグインは、上記のhtmlの場合、div.cornerのバックグラウンドを角丸に変える感じに作られているらしく、背景色に、コンテンツ自体の背景色と同じ色をcssで指定していると、プラグインが適用されたかどうかがブラウザで目視しずらい。って言うか、同じ色だとわからない。プラグインを適用させたい場合は、cssで、バックグラウンドカラーを変えよう。
backgroundで、画像を指定したら、どうなるのかな?今度やってみよう。
Comments