角丸のCSS

takeさん、嘘つきました。

角丸をCSSだけで作成しようとすると無駄なdiv要素が増えてしまいがちらしいです。
そこで、先生から教わった（記憶があります）

最初と最後の画像を指定して、背景色を繰り返すというものです。

そのときに、背景は「透過」処理しないことがポイントだそうです。
あとに記述したものほど、手前に表示される、という特徴を生かした方法だそうなので
背景色指定よりも前に記述すると、ただの四角い箱になってしまうようです。

（イメージ図）

また、ｐ要素の余白をmarginで調整するとWebブラウザにより余白の高さが変わってしまうため、paddingで調整する、という方法をとる・・・らしい。

＜XHTMLソース＞

<div class="block01">

<h2>ブースケさん</h2>

<p>内容が入ります</p>

<p>内容が入ります</p>

<p>内容が入ります</p>

<p>内容が入ります</p>

</div>

＜用意した図＞

Ａ：角丸下の部分の図（透過処理なし）

Ｂ：角丸上の部分の図（透過処理なし）

＜CSSソース＞
　　

.block01 {

　　width: 390px;

　　margin: 0px auto 10px;

　　background: #C0C217 url(Ａ：角丸下の部分の図の場所.jpg);

　　background-repeat: no-repeat;

　　background-position: left bottom;

　　}

　　

.block01 h2 {

　　padding: 10px 10px 5px 10px;

　　margin: 0px;

　　background-image: url(Ｂ：角丸上の部分の図の場所.jpg);

　　background-repeat: no-repeat;

　　background-color: #C0C217;

　　font-size: 1.4em;

　　}

　　

.block01 p {

　　font-size: 1.2em;

　　margin: 0px;

　　padding: 0px 10px 10px;

　　}

＜できあがり図＞