Webページで角丸のボックスを作る方法あれこれ

Webページで角丸のボックスを作る方法あれこれin work

date:2009.04.16 posted by:sakuma

角丸ボックスはWebデザイン、特にブログのデザインなどで良く使われる手法です。デザインの「デフォルト臭さ」を軽減する方法としては非常に効果的で、デザインに柔らかさを出したい時は、とりあえずボックスを角丸にしてみると上手くいく事が多いです。

角丸ボックスを実現するには、通常のコーディングに一手間加える必要があるので、やり方が分からないとちょっと手を出しづらいところがあります。この記事は、角丸ボックスの実現方法を解説することで、角丸導入の敷居を少し下げようという趣旨で書いています。

角丸ブロックを実現する方法としては、画像とCSSを組み合わせる方法、Javascriptのライブラリを使う方法、CSSの拡張要素を使う方法の3種類があります。下記でそれぞれの手法の解説をしていきたいと思います。

画像とCSSで角丸を実現

これは最も古典的な手法です。CSSがメジャーでなかった頃は、テーブルを3×3マスで切って、四隅に角丸画像を配置する、という方法が良く採られましたが、それをそのままCSSで再現するような方針です。つまり、ブロックの角にそれぞれ角丸の画像を配置するようにマークアップ＆CSSコーディングを行います。

CSSで同様の表現をするには、以下のようなマークアップをします。

<div class=”block”>
　 <div class=”block_head”>
　　 <span></span>
　 </div>
　 <div class=”block_body”>
　　ここに本文が入ります。
　 </div>
　 <div class=”block_foot”>
　　 <span></span>
　 </div>
</div>

このマークアップをビジュアルで表すと以下の通りになります。block_head、block_footにはマークアップのみで文字などは入りません。
block_head内を拡大したものが右側ですが、この場合左上の角をblock_head要素の背景画像、右上の角をspan（divでも可）の背景画像として指定します。

CSSファイルの内容は以下のようになります。

.block {
background-color: #背景色;
}
.block_head {
height: 角の大きさ.px;
background: url(‘┏.gif’) no-repeat top left;
}
.block_head span {
display: block;
height: 角の大きさ.px;
background: url(‘┓.gif’) no-repeat top right;
}
.block_body {
color: #文字色;
}
.block_foot {
height: 角の大きさ.px;
background: url(‘┗.gif’) no-repeat bottom left;
}
.block_foot span {
display: block;
height: 角の大きさ.px;
background: url(‘┛.gif’) no-repeat bottom right;
}

Javascriptライブラリを使って角丸を実現

前述の画像を用いる角丸ボックスでは、HTMLにイレギュラーなマークアップを施さなければならない欠点があります。コードを汚さずに角丸を実現したい、という方には、Javascriptライブラリを用いた実現法をオススメします。

この方法では、HTMLのマークアップを崩さずとも、ライブラリを読み込んで少しJavascriptを書き加えることで、Webページの望んだ箇所に角丸コーナーを設置することが可能です。こういったライブラリはすでに数多く作られており、検索するといろいろなライブラリが見つかると思いますが、個人的にオススメなのがNifty Corners Cubeというライブラリです。

Link： Nifty Corners Cube

自分もこの手のライブラリはいろいろ試しましたが、このNifty Cornersが一番自由度が高く、且つコードを汚さない角丸ライブラリと思います。このライブラリの特徴は、画像を別途用意せずとも角丸を適用でき、しかも適用箇所を細かく指定できるという事です（左上隅だけ丸める、ということが可能）。
適用箇所・オプションを指定したJavascriptを書く必要がありますが、そのスクリプトを読み込ませることで、HTMLに細工をせずとも自動的に指定のブロックに角丸を適用してくれます。

リンク先にもありますが、具体的には以下のように記述します。これは「id=”box”」を指定したブロックに大きめの角丸を指定する場合の記述です。

<script type=”text/javascript”>
window.onload=function() { Nifty(“div#box”,”big”); }
<script>

これをページのヘッダ内、もしくは外部jsファイルに記述し読み込ませます。
スクリプトのオプションを追加する場合は、オプションを半角スペースで区切ります。以下の例は上記のボックスの上辺（左上と右上）だけに角丸を適用します。

<script type=”text/javascript”>
window.onload=function() { Nifty(“div#box”,”big top”); }
<script>

ブラウザごとのCSSの拡張要素を使って実現

この方法はここで述べている手法の中でも一番簡単で、且つValid（W3C規格に則っている）なのですが、Firefox・Sarafi・Chrome以外のブラウザでは使えないという大きな欠点があるため、なかなか採りづらい方法です。
ただし、厳密に全てのブラウザでの表示の整合性を取る必要が無いケース（個人ブログなど）では、導入が簡単という事もあるので試してみる価値はあると思います。

ブロック要素に拡張CSSを使った角丸指定をする場合、以下のCSSを記述します。

Firefoxの場合：
-moz-border-radius: 角の大きさpx;

Safari（Google Chrome）の場合：
-webkit-border-radius: 角の大きさpx;

両方記述しておけば、Firefox・Safari両方に適用されます。またかなり特殊な手法になりますが、IE系ブラウザでも同様にCSSのみで角丸を指定する方法があるようです。かなり力技なので、個人的にはこれを使うよりは前述のJavascriptを使う方をお勧めしたいです。

このborder-radius要素は次期のCSSの規格であるCSS3では正式に盛り込まれる予定であり（現在はCSS2.1が主流）、CSS3が策定完了し本格的に出回るようになれば、将来的にはIE系ブラウザでもサポートされるようになるでしょう。具体的にはこんなことが出来るようになる予定です。

"JavaScript"で関連する記事一覧 (シーケンスで表示する)
•2011.10.13-悩める漢のダイエットアプリ「漢のダイエット」リリース！ in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その３ in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.25-オフィシャルサイトで使った技術その１ in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.04.03-AJAX Libraries API in work

« prev post pagetop next post »

parmalink: http://www.thedesignium.com/work/620

Relative Keyword|JavaScript lab