<div class="column">
<div class="inner">
<div>
<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
</div>
</div>
</div>
CSS
div.column{ width: 570px; background: url(kahen/bottom.jpg) no-repeat bottom; padding-bottom: 25px; margin-bottom: 40px; margin-left:40px; } div.column .inner{ background: url(kahen/top.jpg) no-repeat; padding-top: 25px; } div.column .inner div{ background: url(kahen/center.jpg) repeat-y; padding: 0 20px; }
1. 全体を包むdiv(.column)にボックスの下に来る部分の画像を読ませる。
2. その中にもう一つdivを用意し、このにボックスの上部に来る画像を読み込ませる。
3. div(.inner)の中にもう一つdivを用意し、このボックスの中部に来る画像を読み込ませる。
<div class="column"> <div class="body"> <h4>見出し</h4> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> </div> </div>CSS
div.column h4{ background: url(kahen/top.jpg) no-repeat; padding: 25px 25px 0; margin: 0 -20px 10px; } div.column .body{ background: url(kahen/center.jpg) repeat-y; padding: 0 20px; }
1. 全体を包むdiv(.column)にボックスの下に来る部分の画像を読ませる。
2. div(.column)に中にもう一つdiv(.body)を用意し、このボックスの中部に来る画像を読み込ませる。
3. 見出し要素(上記説明の場合h4)に上部に来る画像を読み込ませる。(marginを左右に -20pxする事でpaddingの左右20pxを相殺しています。)
<dl class="column"> <dt>見出し</dt> <dd> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p> </dd> </dl>CSS
dl.column{ background:url(kahen/center.jpg) repeat-y; margin-left:40px; } dl.column dt{ background:url(kahen/top.jpg) no-repeat; padding:25px 25px 10px; font-weight:bold; } dl.column dd{ background:url(kahen/bottom.jpg) no-repeat bottom left; padding:0 25px 25px; }
1. dl(.column)にボックスの中部分の画像を読ませる。
2. dtに上部に来る画像を読み込ませる。(上、左右のpadding調整)
3. ddに下部に来る画像を読み込ませる。(下、左右のpadding調整)