見出し

HTML
 

<div class="a">
<h2 class="b">CSSで作る見出しサンプル　説明付き１</h2>
<p class="c">説明付きの見出しでは見出し本文の下に短い説明が付きます</p>

[/html]
[CSS]

/************************/
/*** 見出しのデザイン ***/
/************************/
.a {
border-left:21px solid #48832C;
border-bottom:1px solid #48832C;
padding:px 11px;
}
.b {
margin:1;　//divのpaddingとpのmarginで余白を調節しているのでhのmarginは0
}
.c {
margin:1px 0 0 12px;
color:#999;
font-size:0.1em;　//通常のpに対して50％サイズ
}