CSSリファレンス、(X)HTML、Movable Type、その他Webサイト制作に関する役立つ情報を掲載します！

前回のCSSで可変対応した角丸のボックスを作る　その1は、画像を上部、下部の二つに分けてやっていたのですが、今回は上記画像の用に上部、中部、下部に画像を切り出してやるやり方を解説したいと思います。

デモページ・サンプルダウンロード

• デモページ
• サンプルダウンロード

見出しなしのテキストのみ場合

XHTML

<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(image/bottom.jpg) no-repeat bottom;
	padding-bottom: 25px;
	margin-bottom: 40px;
}
div.column .inner	{
	background: url(image/top.jpg) no-repeat;
	padding-top: 25px;
}
div.column .inner div	{
	background: url(image/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>

div.column	{
	width: 570px;
	background: url(image/bottom.jpg) no-repeat bottom;
	padding-bottom: 25px;
	margin-bottom: 40px;
}
div.column h4	{
	background: url(image/top.jpg) no-repeat;
	padding: 25px 25px 0;
	margin: 0 -20px 10px;
}
div.column .body	{
	background: url(image/center.jpg) repeat-y;
	padding: 0 20px;
}

1. 全体を包むdiv（.column）にボックスの下に来る部分の画像を読ませる。
2. div（.column）に中にもう一つdiv(.body)を用意し、このボックスの中部に来る画像を読み込ませる。
3. 見出し要素(上記説明の場合h4)に上部に来る画像を読み込ませる。（marginを左右に-20pxする事でpaddingの左右20pxを相殺しています。）

dlで作った場合

<dl class="column">
    <dt>見出し</dt>
    <dd><p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
		<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
    </dd>
</dl>

dl.column	{
	background: url(image/center.jpg) repeat-y;
}
dl.column dt	{
	background: url(image/top.jpg) no-repeat;
	padding: 25px 25px 10px;
	font-weight: bold;
}
dl.column dd	{
	background: url(image/bottom.jpg) no-repeat bottom left;
	padding: 0 25px 25px;
}

1. dl（.column）にボックスの中部分の画像を読ませる。
2. dtに上部に来る画像を読み込ませる。（上、左右のpadding調整）
3. ddに下部に来る画像を読み込ませる。（下、左右のpadding調整）

CSSで可変対応した角丸のボックスのまとめ

前回と今回説明した用に、CSSで可変対応した角丸のボックスと言っても作り方はいろいろあります。

自分は大体CSSで可変対応した角丸のボックスを作る　その1で解説したように画像を上部、左右下部の二つに分けて作るやり方を使っています。
理由は無駄divを増やす事なくソースがシンプルになる。後は楽だからですｗ

でも背景透過のpng画像を使う場合や、やたらと縦長になっている場合は今回の用に上部、中部、下部３つの画像を使ってのやり方を使いますね。

(2008/08/22 12:27 PM)