あのサイトわすれました https://ameblo.jp/cocoa-iris/ 忘れ物が多いふらっとさんはひたすらメモを取るのです。ブックマーク中心備忘録。 ja 「curvyCorners」で簡単角丸ボックス


「curvyCorners」は手軽に角丸ボックスを表現できるJavaScriptライブラリです。



divボックスのコーナー部分を丸くする手法は、Web2.0を意識したウェブサイトで多用されるデザインパターンとして定着した感があります。

しかし角丸ボックスをHTMLとCSSだけで表現するためには、コーナー部分のための背景画像を用意したり、その背景画像を表示させるために要素の入れ子を作ったりと、これがなかなか面倒です。



そういった面倒な作業抜きで、JavaScriptで角丸ボックスを実現してくれるのが「curvyCorners」。

このエントリーでは、「curvyCorners」のインストールから設定までの方法を説明していきます。





  • サポートブラウザ : IE, Firefox, Safari, Google Chrome, Opera

  • 使用ライブラリ : jquery.js, curvycorners.js

  • 変更できる要素 : 角丸半径サイズ, アンチエイリアシングの有無

  • ライセンス形式 : LGPL

  • 記事で扱っているバージョン : 2.0.4




インストール



最初に使用するライブラリをダウンロードします。
必要なライブラリは以下の２つ。




この例では、jqueryは「jquery-1.3.2.min.js」を、curvyCornersはダウンロードしたファイルを展開した中にある「curvycorners.js」を使用します。



jqueryなどのライブラリでは、コードを圧縮したものなどのファイル名が違う別バージョンが配布されていることがあります。

どれを使えばいいの？という方には、jQuery 1.3.2 日本語リファレンスが参考になると思います。



２つのライブラリをサーバにアップロードした後、HTMLの <head> セクションにライブラリの場所を記述します。



次に、CSSとJavaScriptコードを記述します。

この部分は、ダウンロードしたcurvyCornersファイルを展開した中にあるデモを参考に。



記述例


<head>
<script src="../js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/curvycorners.js" type="text/javascript" charset="utf-8"></script>

<!----- JavaScript ----->
<script type="text/javascript">
$(function() {
var settings = {
tl: { radius: 5 }, /* 左上角の半径 */
tr: { radius: 5 }, /* 右上角の半径 */
bl: { radius: 5 }, /* 左下角の半径 */
br: { radius: 5 }, /* 右下角の半径 */
antiAlias: true /* アンチエイリアスの有無 true (あり) / false (なし) */
};

curvyCorners(settings, "#myDiv");
});
</script>

<!----- CSS ----->
<style type="text/css">
#myDiv {
width:50%;
margin:0 auto 30px auto;
padding:3em;
border:2px solid #333;
background-color:#c6c6c6;
-moz-border-radius:0.25em;
-webkit-border-radius:0.25em;;
}
</style>
</head>
<body>
<div id="myDiv">

コンテンツ

</div>
・
・
・
</body>



JavaScript部分の設定



tl,tr,bl,br



左からそれぞれ、左上、右上、左下、右下の角丸半径を数値で指定。

単位はピクセルで、0を指定すると丸みがなくなります。



antiAlias



アンチエイリアシングの有無。

アンチエイリアスをかけると、エッジ部分がなめらかに表示されます。



true : アンチエイリアスあり

false : アンチエイリアスなし



curvyCorners(settings, "適用したい要素のidまたはclass名");



角丸にしたいdivボックスのid、またはclass名を赤字の部分に記述。

idの場合は"#(id名)"、classの場合は".(class名)"というように、それぞれハッシュ(#)とピリオド(.)を付けます。




CSS部分のポイント



CSSではボーダーの有無や背景色などを指定します。

ボーダーの形式はsolidのみ有効です。



また、ボックスに背景画像を使用した場合でも角丸表示は有効なので、写真の見せ方にちょっとスパイスが欲しいときなど便利かもしれません。



curvyCornersはもちろんJavaScriptがオフの状態では効きません。

そういう状況のためのセーフティーネットとして、いくつかのブラウザで独自プロパティとして先行実装されているborder-radiusを指定しておきます。

対応しているウェブブラウザごとにプロパティ名が違うので、注意してください。



-moz-border-radius



Firefox向け。



-webkit-border-radius



webkitレンダリングエンジンを搭載したウェブブラウザ向け。

Safari、Google Chromeなど。





上記プロパティに対応しているウェブブラウザではJavaScriptがオフの状態でもCSSの指定が効いて角丸が保持されますが、IEやOperaではコーナーは角のまま表示されることになります。


適用するボックスの記述



角丸にさせたいdivボックスに、idまたはclass名を指定します。

JavaScriptとCSSで指定した名前と合っているかどうかチェックするのを忘れずに。



これで設定完了です。

curvyCornersに含まれているデモやこちらのサンプルページを参考にカスタマイズしてみてください。


自分へのメモ



  • curvyCornersを使用すると画像を使わず角丸ボックスを表現できる。

  • 既存のページに適用する場合もそれほど手間がかからない。

  • radius分だけボックス幅が広がる。

  • 適用後はかなりの数のdiv要素が入れ子状に追加される。

  • radiusを大きくするほど、適用する要素が増えるほど処理に時間がかかるようになる。


関連リンク



]]> https://ameblo.jp/cocoa-iris/entry-10324486340.html Wed, 19 Aug 2009 20:39:10 +0900 bookmark : ENGAGEMENTdb




企業のソーシャルメディア活用度ランキングサイト「ENGAGEMENTdb」。

世界的な企業上位100社を対象にした「どれだけソーシャルメディアのチャンネルを活用しているか」という調査結果を、グラフやリストで表示してくれます。



目と耳を通り抜けていく話題の中に"ソーシャルメディア"という言葉が無い日の方が少ないかもしれない最近のウェブシーン。

この調査のもとになった「ソーシャルメディアをうまく活用することが経済的な成功に繋がる」という仮説も、あながち言い過ぎじゃないかもと思わせる結果です。



ちなみにこのエントリーを書いている時点での第一位Starbucksは、ブログやYouTubeはもちろん、Facebook、Flickr、Twitter、Facebookまで活用中。

同社Facebook上でのファンは350万人だとか。みんなスタバが好きなんだ！



マーケティング的な面での興味もあるのだけれど、何よりENGAGEMENTdbのサイトデザインがツボ。


]]> https://ameblo.jp/cocoa-iris/entry-10323150385.html Tue, 18 Aug 2009 02:00:02 +0900 bookmark : Peter Pearson




イギリスのウェブデザイナーさんのポートフォリオ「Peter Pearson」。

横スクロールで展開していく見せ方自体はけっして目新しい物ではないけれど、背景画像を上手に組み合わせて、「雲の中にコンテンツがある」感を横方向への動きの中で演出しているところに注目。

まずしっかりしたコンセプトがあって、それを表現するために一番適切だと思う手法を使う。

手法が先にくるのではない。

当たり前のことだけど、忘れてしまいがち。


]]> https://ameblo.jp/cocoa-iris/entry-10320239346.html Thu, 13 Aug 2009 22:11:48 +0900 bookmark : Rock Creek Strategic Marketing




グラデーションの使い方が巧い「Rock Creek Strategic Marketing」。

文字組や画像の使い方も細かいところまで考え抜かれている印象です。


]]> https://ameblo.jp/cocoa-iris/entry-10318598782.html Tue, 11 Aug 2009 14:31:24 +0900 bookmark : SimpleBits




最近リニューアルしてますますカッコ良くなった「SimpleBits」。

マージンが美しい。



]]> https://ameblo.jp/cocoa-iris/entry-10318021250.html Mon, 10 Aug 2009 15:05:24 +0900