角丸背景を画像1枚で実装

CSS2008年11月30日

よく使う角丸背景のデザインですが、実は1枚の画像だけで実装することが可能です。

CSS

任意のIDまたはclass{
background:url(/任意のパス/round.gif) left bottom no-repeat;
padding-bottom:10px;
}
任意のIDまたはclass div{
background:url(/任意のパス/round.gif) left top no-repeat;
}
任意のIDまたはclass div p{
padding:10px 10px 0 10px;
}

HTML

<div class="任意のクラス名">
<div>
<p>1枚の画像だけで角丸背景を実装しています</p>
</div>
</div>

divが入れ子にはなりますが、逆にいればデメリットはそれのみで、いちいち上部の画像・中央の画像・下部の画像というように別々に画像を書き出す必要も無いですし、ソースも最も簡略化されるのではないでしょうか。別パターンの角丸背景を作成するときも、ソースを流用しやすいです。

• bodyにfont-size100.01%を指定
• floatさせた要素を簡単にfloat解除させる「clearFix」

この記事を読んでいる方にオススメの記事

• CSSfloatを使わずに、横並びのリストを実装
• CSSfloatさせた要素を簡単にfloat解除させる「clearFix」
• CSSIE8における拡大縮小バグ
• CSSレスポンシブWebデザインについて
• CSSデフォルトで記述しておくと便利なCSS(スタイルシート)
• CSSCSSを自動でIE6に対応させるオンラインサービス「ie6fixer」

「CSS」の他の記事を読む

• ※承認制のため、即時には反映されません。