CSSデザインカタログ » block »見出し部分を反転させた枠 : div020-hpl
サンプル
見出し部分を反転させた枠 : div020-hpl
h3，pとolによるリストを含む
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
- 手順1
- 手順2
- 手順3
- 手順4
ソース
XHTML
<div class="div020-hpl">
<h3>見出し部分を反転させた枠 : div020-hpl</h3>
<p>h3，pとolによるリストを含む</p>
<p>テキストテキスト......</p>
<ol>
<li>手順1</li>
<li>手順2</li>
<li>手順3</li>
<li>手順4</li>
</ol>
</div>
CSS
div.div020-hpl {
margin: 1em 0;
border: solid 1px #FF6464;
}
div.div020-hpl h3 {
margin: 0 0 1em 0;
background: #FF6464;
padding: 5px 15px;
color: #FFF;
}
div.div020-hpl p {
margin: 0.5em 15px 0.5em 30px;
}
div.div020-hpl ol {
margin-left: 0;
padding-left: 0;
}
div.div020-hpl ol li {
margin-left: 60px;
list-style: outside decimal;
}
解説
divでボックス全体を枠で囲み，h3で背景色とフォント色（白）を指定しています。h3のmarginは下だけをとり，上と左右は0にします。枠と背景色の間に隙間ができないようにするためです。0を改めて指定しないと，デフォルトでとられている（または他で指定された）marginが適用されて，隙間が出てしまいます。olの番号付きのリストは番号が文章の左外側につくようにlist-styleプロパティでoutsideを，アラビア数字がつくようにdecimalを指定しています。通常，デフォルト値がoutside，decimalなので特に指定する必要はないかもしれませんが，list-styleをリセットしている場合もよく見かけますので，念のために記述してあります。