Webテンプレート/ボックス/見出し付きボックス2-2

見出し

【ボックス】

ボックスの内容

このサンプルでは、枠線を含めたボックスの幅は300pxになります。（親要素の幅に合わせる場合は、「ボックスの幅」の指定は必要ありません）
見出しの表示位置は、見出しのマージンで調節することができます。
見出しの部分で使用しているタグ（h2）は、ご自分のページに合わせて適切なレベルに変更してください。

コード

CSSコード

.example {
padding: 30px 10px;
background-color: #ffffff;
}

/* --- ボックス --- */
.section {
width: 298px; /* ボックスの幅 */
background-color: #ffffff; /* ボックスの背景色 */
border: 1px #c0c0c0 solid; /* ボックスの枠線 */
font-size: 80%; /* ボックスの文字サイズ */
}

/* --- 見出し --- */
.section h2 {
position: relative; /* IE6用 */
width: 3.5em; /* 見出しの幅 */
margin: -0.6em 0 0 5px; /* 見出しのマージン（上右下左） */
background-color: #ffffff; /* 見出しの背景色 */
font-size: 100%; /* 見出しの文字サイズ */
text-align: center;
}

/* --- ボックス内の段落 --- */
.section p {
margin: 1em 10px; /* 段落のマージン（上下、左右） */
}

HTMLコード

<div class="example">

<div class="section">

<h2>見出し</h2>

<p>【ボックス】</p>
<p>ボックスの内容</p>
<p>ボックスの内容</p>

</div>

</div>

備考

見出しの上マージンにマイナス値を指定しているので、状況によっては他の要素と重なってしまったり、親要素（example）からはみ出してしまう場合があります。それを避けたい場合は、ボックスに上マージンを指定するか、親要素に上パディングを指定してマイナス分の領域を確保しておいてください。
見出しテキストの左右には、多少余裕を持たせてください。ギリギリに設定すると、文字サイズを変更した際に折り返しが入ってしまう場合があります。
IE6での不具合（ボックスからはみ出た部分が消えてしまう）を避けるため、見出しに position: relative を指定しています。