【ボックス】
ボックスの内容
ボックスの内容
【ボックス】
ボックスの内容
ボックスの内容
【ボックス】
ボックスの内容
ボックスの内容
【ボックス】
ボックスの内容
ボックスの内容
【ボックス】
ボックスの内容
ボックスの内容
【ボックス】
ボックスの内容
ボックスの内容
【ボックス】
ボックスの内容
ボックスの内容
【ボックス】
ボックスの内容
ボックスの内容
ボックスの幅と同じサイズの背景画像を使用してください。
背景色は白となります。(角丸の部分は透過されていません)
※画像へは直接リンクしないでください。(ダウンロードしてから使用してください)
以下のCSSコードは、ボックスの幅を300pxに指定する場合の設定内容となります。幅を変更したい場合は、「ボックスの幅」「ボックスの背景画像」「見出しの背景画像」、この3ヵ所を変更してください。
.example { padding: 30px 10px; background-color: #ffffff; font-size: 80%; color: #000000; } /* --- ボックス --- */ .section { width: 300px; /* ボックスの幅 */ padding-bottom: 5px; /* ボックスの下パディング */ background: #ffffff url(maru2_300_bottom.gif) no-repeat bottom; /* ボックスの背景 */ } /* --- 見出し --- */ .section h2 { margin: 0; /* 見出しのマージン */ padding: 1em 15px 0 10px; /* 見出しのパディング(上右下左) */ background: #ffffff url(maru2_300_top.gif) no-repeat top; /* 見出しの背景 */ font-size: 100%; /* 見出しの文字サイズ */ } /* --- ボックス内の段落 --- */ .section p { margin: 1em 15px 1em 10px; /* 段落のマージン(上右下左) */ }
<div class="example"> <div class="section"> <h2>見出し</h2> <p>【ボックス】</p> <p>ボックスの内容</p> <p>ボックスの内容</p> </div> </div>