Webテンプレート/ボックス/角丸ボックス2

見出し

【ボックス】

ボックスの内容

幅は固定、高さは可変のボックスとなります。このサンプルでは300pxの幅に固定されています。
ボックスの背景には下側の枠線画像を、見出しの背景には上側の枠線画像を設定しています。この2つを重ね合わせて、ボックス全体の枠線に見せています。
下側の枠線画像の高さは500pxなので、ボックスの高さは最大で「500px + 見出しの高さ」までとなります。
見出しの部分で使用しているタグ（h2）は、ご自分のページに合わせて適切なレベルに変更してください。

使用している画像

maru4_300_top.gif

maru1_300_bottom.gif

背景色は白となります。（角丸の部分は透過されていません）

※画像へは直接リンクしないでください。（ダウンロードしてから使用してください）

コード

CSSコード

.example {
padding: 30px 10px;
background-color: #ffffff;
font-size: 80%;
color: #000000;
}

/* --- ボックス --- */
.section {
width: 300px; /* ボックスの幅 */
padding-bottom: 1px; /* ボックスの下パディング */
background: #ffffff url(maru1_300_bottom.gif) no-repeat bottom; /* ボックスの背景 */
}

/* --- 見出し --- */
.section h2 {
margin: 0; /* 見出しのマージン */
padding: 7px 10px; /* 見出しのパディング（上下、左右） */
background: #ffffff url(maru4_300_top.gif) no-repeat top; /* 見出しの背景 */
border-bottom: 1px #c0c0c0 solid; /* 見出しの下枠線 */
font-size: 100%; /* 見出しの文字サイズ */
}

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

HTMLコード

<div class="example">

<div class="section">

<h2>見出し</h2>

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

</div>

</div>