角丸に関するあれこれ

Entry Information

yoshi
December 17, 2006 - 17:47.
web topic

Rounded Corner 最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。

ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。

角丸の作り方その1、画像を使う方法

ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。

<!--HTML-->
<div class="left-top">
 <div class="right-top">
  <div class="left-bottom">
   <div class="right-bottom">
    <p>テキストをここに入れる</p>
   </div>
  </div>
 </div>
</div>

/*--CSS--*/
* {
     margin:0;
     padding:0;
     }
div.left-top {
     with:200px; /*適当に調整*/
     background:url(/image/left-top-round.png) no-repeat left top #ccc; /*画像と同じ色を指定*/
     }
div.right-top {
     background:url(/image/right-top-round.png) no-repeat right top;
     }
div.left-bottom {
     background:url(/image/left-bottom-round.png) no-repeat left bottom;
     }
div.right-bottom {
     background:url(/image/right-bottom-round.png) no-repeat right bottom;
     }
p {
     padding:10px; /*適当に調整*/
     }

で、角丸画像を生成するのに、p o p * p o p さんで紹介されていた、Google の隠れ API なんかが便利かも。

角丸画像を瞬時に生成するGoogleの隠れAPI！： p o p * p o p

12/18 追記
上記で「隠れ API」として紹介されている機能は Google が正式に利用を認めているものではないので、積極的に利用をすすめるものではありません。

角丸の作り方その2、JavaScript を使う方法

JavaScript を使う場合は、下記のようなライブラリがあります。どれも画像は必要ありません。JavaScript なので、(X)HTML ソース自体はクリーンに保てます。でも、JavaScript が裏でやっているのは強烈なタグの入れ子によって無理やり角丸に見せるという力技。

これらについては、tech.nitoyon.com@hatena さんがそれぞれを比較しつつまとめられています。

角丸の作り方その3、PHP を使う方法

phpspot開発日誌さんで紹介されていた、「PhpMyBorder」を使うという手もあるようです。PHP が利用できるならお手軽だし便利っぽい。

PHPで角丸枠（CSS）を簡単に作る方法： phpspot開発日誌

角丸ジェネレータ

角丸用のソースや画像を生成してくれるツール。どちらも角のサイズやカラーなどを入力するだけ。「その1」と同じようなソースを自動で作ってくれる感じ。

おまけ。CSS3 「border-radius」プロパティを使う

CSS3 Backgrounds and Borders Module (Working Draft) では border-radius プロパティが定義されています。

div.round {
     border-radius:10px 15px 20px 5px;
     }

のように指定できます。

一番スマートな方法だと思いますが、残念ながら現在のところ対応しているブラウザを知りません。Gecko レンダリングエンジンを搭載したブラウザ（Firefoxなど）では border-radius のテスト実装として、「-moz-border-radius」プロパティが実装されていますが、これは独自拡張なのであまりオススメできません。

さて、角丸ブームはいつまで続くのでしょうか、、

Add to Bookmarks