CSSデザインカタログ » block » 見出し部分を画像にした角丸の枠 : div042-hpl
サンプル
h3，pとulによるリストを含む
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
- 項目1
- 項目2
- 項目3
- 項目4
ソース
XHTML
<div class="div042-hpl">
<h3><img src="img/hd-div042-hpl.png" alt="見出し部分を画像にした角丸の枠 : div042-hpl" /></h3>
<p>h3，pとulによるリストを含む</p>
<p>テキストテキスト......</p>
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
<li>項目4</li>
</ul>
</div>
CSS
div.div042-hpl {
margin: 1em 0;
width: 570px;
background: url(../block/img/bg-roundcorner.png) no-repeat bottom;
}
div.div042-hpl h3 {
margin: 0 0 1em;
padding: 0;
}
div.div042-hpl p {
margin: 0.5em 15px 0.5em 30px;
}
div.div042-hpl ul {
margin-left: 30px;
padding-left: 0;
}
div.div042-hpl ul li {
margin-left: 30px;
}使用画像
解説
divの背景画像として左右と下の枠を入れ，かぶせるようにh3の見出し画像を入れています。divの背景画像はbottomで下辺を基準に配置します。divの高さを超える上の余分は表示されなくなります。divの背景画像は縦に長く作っておきます。中に入るテキストの量，画像の大きさが変わっても対応できるようにするためです。表示フォントサイズが大きくなったときも枠が切れずにすみます。divにはwidthをpxで指定して，背景画像がぴたり入るようにします。divの幅が小さくなると左右の枠が表示されなくなり，大きくなると中身が枠の外にはみ出ます。h3のmarginは下だけをとり，上と左右は0にします。paddingも0にします。下の枠とずれないようにするためです。0を改めて指定しないと，デフォルトでとられている（または他で指定された）marginが適用されて，ずれてしまいます。alt属性として画像に書かれたものと同じテキストを入れておきましょう。画像が表示されない場合や視覚に依らない読者は，alt属性が正確に書かれていないと内容が判断できなくなります。