CSSデザインカタログ » block » 見出し部分に背景画像を入れた角丸の枠 : div052-hpi
サンプル
見出し部分に背景画像を入れた角丸の枠 : div052-hpi
h3，pとセンタリングした画像を含む
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
ソース
XHTML
<div class="div052-hpi">
<h3>見出し部分に背景画像を入れた角丸の枠 : div052-hpi</h3>
<p>h3，pとセンタリングした画像を含む</p>
<p>テキストテキスト......</p>
<p class="photo"><img src="img/ph-dummy.jpg" alt="photo : ダミー" width="360" height="135" /></p>
</div>
CSS
div.div052-hpi {
margin: 1em 0;
width: 570px;
background: url(../block/img/bg-red-round-corner.gif) no-repeat bottom;
padding-bottom: 1px;
}
div.div052-hpi h3 {
margin: 0 0 1em;
border-bottom: solid 1px #FFB1B1;
padding: 0.5em 15px;
background: url(../block/img/bg-red-round-corner-header.gif) no-repeat top;
color: #903;
}
div.div052-hpi p {
margin: 0.5em 15px 0.5em 30px;
}
div.div052-hpi p.photo {
text-align: center;
}
div.div052-hpi p.photo img {
border: solid 8px #FFE6E6;
}使用画像
解説
divの背景画像として左右と下の枠を入れ，かぶせるようにh3の背景画像を入れています。divの背景画像はbottomで下辺を基準に，h3の背景画像はtopで上辺を基準に配置します。div，h3の高さを超える余分は表示されなくなります。divの背景画像は縦に長く作っておきます。中に入るテキストの量，画像の大きさが変わっても対応できるようにするためです。表示フォントサイズが大きくなったときも枠が切れずにすみます。h3の背景画像も同様に縦に長く作っておきます。中に入るテキストの量，表示フォントサイズが変わっても背景が切れずにすみます。divにはwidthをpxで指定して，背景画像がぴたり入るようにします。divの幅が小さくなると左右の枠が表示されなくなり，大きくなると中身が枠の外にはみ出ます。h3のmarginは下だけをとり，上と左右は0にします。paddingも0にします。下の枠とずれないようにするためです。0を改めて指定しないと，デフォルトでとられている（または他で指定された）marginが適用されて，ずれてしまいます。pは，特にclassをふってセンタリングしてあります。画像をpではなく，dlで全体を，dtで画像そのものを，ddで画像の説明をマークアップする方法もあります。