niftycube.js - 角丸効果 JavaScript ライブラリ

対応ブラウザ: （: 表示に乱れあり）

先日、"Nifty Corners Cube" という、ボックスの外枠に角丸効果を出すための JavaScript ライブラリを知りました。「え？今頃知ったの？」って方はともかく、「何でいまさら角丸効果を JavaScript で出す必要なんかあるの？！そんなの、CSS でできるじゃない？」と怪訝に思われる方もいるでしょうが、まずはこの niftycube.js の特徴をご覧あれ。

主要機能

• 文書構造上、無意味なブロック要素（div など）を HTML 上に記述することなく、単一の div 要素に対してでも角丸効果を出すことができる。
• （以前に紹介した behaviour.js のように）角丸効果を適用する場所を CSS セレクタで指定できる。
• CSS の背景色や背景画像などを niftycube.js が自動的に検出してくれるため、JavaScript の記述量が非常に短い。（JavaScript 初心者でも簡単に扱える。）

サンプル 1

サンプル 2

(X)HTML

まずはサンプル1, 2 の HTML ソースを見てください。

<div id="box1">サンプル 1</div>
<div id="box2">サンプル 2</div>

HTML 側はこれだけ。（！）一応、それぞれのボックスに対して id を振っていますが、CSS セレクタで適用場所を指定できるので id すら必ずしも要りません。

通常、CSS と背景画像を使った角丸効果は、縦横のボックスサイズが固定されている場合を除けば、最低でも２つのブロック要素が必要でしたが、Nifty Corners Cube を利用することで、外観のために文書構造上で意味のないブロック要素をいたずらに追加する必要がなくなります。もちろん、JavaScript を切っても、単に角丸効果がつかなくなるだけなので、アクセシビリティ的には何ら問題ありません。

CSS

次に CSS ですが、関係するのは主に背景色や背景画像の指定だけです。ちなみに今のところ border がついているとうまく機能しないようです。

#box1 {

background: #dab;
margin: 1em;
padding: 1em;

}
#box2 {

background: url('http://my-chunqiu.cocolog-nifty.com/images/pattern1.gif') repeat;
margin: 1em;
padding: 1em;

}

なお、残念ながらドロップシャドウ効果はつきません。もちろん、背景画像とブロック要素の横幅絶対値指定、見出し要素（h1-h6）、z-index などを駆使することでドロップシャドウ効果を演出することは可能です。

理論的にはドロップシャドウ オプションの実装は可能だと思うので、将来バージョンでの対応に期待しましょう。（「自分で書け」という突っ込みが聞こえてきそうですが..。(^_^;) ）

JavaScript

最後に JavaScript。まずはパスの指定。

<script type="text/javascript" src="[niftycube.js へのパス]"></script>

JavaScript のソースも極限まで短く抑えられています。角丸効果は適用する角の指定、角丸の大きさなどをオプションで指定できるようになっています。最初のパラメータで場所（CSS セレクタを使う）を指定し、２つめのパラメータで効果のオプションを指定します。特別な指定が必要ない場合は、オプションは省略できます。背景色や背景画像は CSS から自動的に取得してくるので、JavaScript 側で指定する必要はありません。

<script type="text/javascript">

window.onload = function(){

Nifty("div#box1");
Nifty("div#box2","transparent");

}

</script>

もしくは、この場合は以下のように記述しても可。

<script type="text/javascript">

window.onload = function(){

Nifty("div#box1,div#box2");

}

</script>

利用可能な CSS セレクタ

セレクタ	記述例
タイプセレクタ	"div" "h2"
ID セレクタ	"div#header" "h2#about"
クラスセレクタ	"div.code" "span.date" "p.comment"
子孫セレクタ	"div#content h2" "div#menu a" "ul.news li"
複数セレクタのグループ化	"h2,h3" "div#header,div#content,div#footer"

個人的には、ほかに属性セレクタ（Attribute selectors）や隣接兄弟セレクタ（Adjacent sibling selectors）にも対応して欲しいところですが...。

利用可能な角丸オプション

オプション	意味
tl	左上の角に適用。
tr	右上の角に適用。
bl	左下の角に適用。
br	右下の角に適用。
top	上辺の角に適用。
bottom	下辺の角に適用。
left	左辺の角に適用。
right	右辺の角に適用。
all（デフォルト）	四隅すべてに適用。
none	四隅すべてに角丸を適用しない。
small	小さめの角丸 (2px)
normal （デフォルト）	通常サイズの角丸 (5px)
big	大きめの角丸 (10px)
transparent	背景色をデフォルト（無指定、透過）にする。
fixed-height	上下幅固定。
same-height	セレクタで指定されたすべての要素に対して同一の上下幅を適用。

注意点

Nifty Corners Cube には niftyCorners.css が同梱されていますが、この CSS ファイルへのリンクは niftycube.js が追加する仕組みになっているため、(X)HTML ファイル側でパスを通す必要はありません。ただし niftycube.js では、(X)HTML ファイルと niftyCorners.css がいずれも js ファイルと共に同一ディレクトリ内に置かれていることを前提にコーディングされているようです。

もし、CSS ファイルを別のディレクトリ —たとえば css という名前のディレクトリに一括保存している場合は、niftycube.js の 37行目あたりにある niftyCorners.css へのパスを次のように書き換える必要があります。

l.setAttribute("href","css/niftyCorners.css");