スポンサードリンク

角丸ブロック

大抵は4つの隅に円を4等分した画像を使うのですが、それとは別にスタイルシートでなんとかする方法なんかもやってみたいと思います。

画像による角丸ブロック (角丸テーブル)

この4つの画像(透過gif)を使って、角丸ブロックを作成します。tableを使って実現するので角丸テーブルとも言うみたい。

サンプル

<style type="text/css">
.radius{
background-repeat: no-repeat; width: 12px; height: 12px;
}
.upper_left{
background-image: url('img/upper_left.gif');
}
.upper_right{
background-image: url('img/upper_right.gif');
}
.lower_left{
background-image: url('img/lower_left.gif');
}
.lower_right{
background-image: url('img/lower_right.gif');
}
.noimg{
background-color: #eeeecc;
}
</style>

<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
    <td class="upper_left radius"></td>
    <td class="noimg"></td>
    <td class="upper_right radius"></td>
</tr>
<tr>
    <td class="noimg"></td>
    <td class="noimg" valign="middle" align="center" width="200" height="100">サンプル</td>
    <td class="noimg"></td>
</tr>
<tr>
    <td class="lower_left radius"></td>
    <td class="noimg"></td>
    <td class="lower_right radius"></td>
</tr></tbody>
</table>


	サンプル

ポイント

ぶっちゃけスタイルシート関係ないんです。真ん中のtdのvalign="middle" align="center" width="200" height="100"をいじることで、いろんな大きさ・配置にすることができます。

スタイルシートによる角丸ブロック (border-radius)

Firefoxは-moz-border-radiusという角を丸くする独自のプロパティーがあって、実験的な機能として実装がなされていますので試してみたいと思います。

CSS3ではborder-radius というプロパティーができるようです。

サンプル

<div style="-moz-border-radius: 7%;
  width: 224px; height: 100px; text-align: center; background-color: #eeeecc;">
サンプル
</div>

サンプル

Firefox以外では普通に表示されてしまっていると思います。

ポイント

ブラウザ依存になってしまうので使わないほうが良いです。

スタイルシートによる角丸ブロック (Nifty Corners)

Nifty Cornersというのを見つけました。このページでは、スタイルシートだけで角丸ブロックを作っています。画像を使ったほうが手っ取り早いきはしますが、面白いのでやってみます。

サンプル

ぶっちゃけ向こうのページと同じですので、詳しくはそちらを参照してください。

<style type="text/css">
.rtop, .rbottom{display:block; background: #FFF}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background-color: #eeeecc;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
</style>

<div style="background-color: #eeeecc; width: 224px;">
<b class="rtop">
  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<div style="margin: 50px 0 50px 0; width: 100%; text-align: center;">サンプル</div>
<b class="rbottom">
  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>

サンプル

ポイント

画像で作ったのと比較しても問題ないレベルで角丸ブロックになっているのがわかると思います。画像を作れない・作るのが面倒・置く権限がない人には、役立つ方法なのかも知れません。

メールアドレス:
コメント^*: