[css]角丸を作る

昔作ったmemoメールを大幅に改良しようと今、目論んでいるのですが、その中の修正項目の一つとして、cssで角丸を表現したいなーっと。

PHPSPOT:1個の画像でシンプルに角丸を実装するCSSサンプル

を参照すると、さらにリンクがあって、そちらに具体的な方法が書いてありました。

Search-This:Simple Round Corners in CSS (revisited)

ものすごくざっくり言ってしまうとimage (20px x 20px)のPNG形式の「○」画像を用意すれば、cssのみで実現できてしまうという方法みたいです。
(JavaScriptを使わないのがなんとも魅力的)

実際にリンク先にあるプログラムをコピーして検証したところ、コーナーがきちんと角丸になってすっげーうれしかった。

ただプログラムを参照して気になったのは、

h1 {margin:.5em;}

via:Simple Round Corners in CSS (revisited)

↑の部分はいらないのでは？？

試しに削除して実行したら予想通り正常終了。
(htmlを見るとh1タグがないので当たり前といえば当たり前かー。)

さらに横幅の大きさを変更したいなーっと思ったので、

.one{width:40%}

via:Simple Round Corners in CSS (revisited)

の部分を変えてみたら、きちんと大きさが反映されているじゃーないっすかぁー♪
(firefox 3で動作確認)

縦幅は、記事で紹介されているpタグの中身を修正すれば、その量に応じて変更されます。

pタグは他のタグに切り替えてもオッケーでtextareaで試しても大丈夫でした。

サンプルプログラムを写せばとりあえず表示はできるので、興味のある方は、是非、是非。

最後にエントリーが削除されるのが怖いので、プログラムを一部改変して引用させていただきます。

<!-- cssセクション -->
* {margin:0;padding:0}
body {
background:#e5e5e5;
color:#000;
}
.box{
float:left;
background:#fff;
padding:0 10px;
margin:10px;
/* IE double margin bug*/
display:inline;
}
.one{
/*
この部分を動かすことで
横幅を調節できる
*/
width:40%;
}
.inner{
background:#fff;
padding:10px 0;
margin:-10px 0;
position:relative;
/* ie7 haslayout issues fix*/
min-height:0;
}
* html .inner{
/* ie6 haslayout issues fix*/
height:1px
}

.top,.base{
margin:-10px -10px 0;
background:url(http://www.pmob.co.uk/pob/images/one-round-test2.png) no-repeat left top;
height:10px;
position:relative;
font-size:10px;
}

.base{
background-position:left bottom;
margin:0 -10px -10px;
}

.top span,.base span{
background:url(http://www.pmob.co.uk/pob/images/one-round-test2.png) no-repeat right top;
display:block;
height:10px;
font-size:10px;
}

.base span{
background-position:right bottom;
}

<!-- htmlセクション -->
<div class="box one">
<div class="inner">
<div class="top">
<span></span>
</div>
<div class="content">

</div>
<div class="base">
<span></span>
</div>
</div>
</div>

via:Simple Round Corners in CSS (revisited)

実行結果の画像

そー言えば、だいぶ前にかった↓の本まだ読んでないなー。

本が溜まっていく一方だー。