backgroundを複数重ねる方法と使いどころ。ケース①

WEB制作、マーケティングに関する情報をお届けします。

backgroundを複数重ねる方法と使いどころ。ケース①

2016.08.09

カテゴリ：WEB制作

タグ：

IE6〜8のサポートも終了し古いブラウザへの対応が無くなって来てCSS3も頻繁に使えるようになりホームページ制作が楽になってきました。今日は以外と使われてないけど知ってると便利な背景を複数重ねる方法を使って一方方向に可変のボックス作成方法を紹介します。

インデックス

1.デモを見る
2.仕様について
3.コードについて
4.まとめ

1.デモを見る

下記から見ることが出来ます。

デモを見る

2.仕様について

デモのような枠を作りたいときですが、四隅の短い線はCSSで実装出来ません。
厳密に言うとdivとかspanとかを使えば出来ますが、線のためだけにHTMLがごちゃごちゃしてしまいます。
そこで下記の画像の右側の3パーツを重ねて使います。

左右方向or上下方向(素材は上下で作成)にのみ可変で設置出来るので、横幅のサイズ違いのボックスが有る場合は3パーツだけで対応できます。

パーツの階層について

backgroundの一番下に真ん中の上下にラインが入った画像を使ってその上のレイヤーに左右の短い線が入ったパーツを配置します。

3.コードについて

下記がコードになります。

HTML

<div id="demo-wrap" class="cf">
	<div id="rsp-box" class="clearfix">
		<h4>ボックスのタイトル</h4>
		<div id="text-area">
			<dl>
				<dt>タイトル</dt>
				<dd>ここにテキストが入ります。ここにテキストが入ります。</dd>
			</dl>
			<dl>
				<dt>タイトル</dt>
				<dd>ここにテキストが入ります。</dd>
			</dl>
			<dl>
				<dt>タイトル</dt>
				<dd>ここにテキストが入ります。</dd>
			</dl>
		</div>
	</div>
</div>

<h4>ボックスのタイトル</h4>

<dl>

<dd>ここにテキストが入ります。ここにテキストが入ります。</dd>

</dl>

<dl>

<dd>ここにテキストが入ります。</dd>

</dl>

<dl>

<dd>ここにテキストが入ります。</dd>

</dl>

</div>

CSS

#demo-wrap{
	max-width:990px;
	margin: 0 auto;
}
#rsp-box{
	margin: 0 auto;
	padding: 0 3% 0;
}
#rsp-box h4{	
	margin: 20px auto;
	color:#ED6C00;	
	text-align:center;
}
#text-area {
	max-width:500px;
	height:200px;
	background:url(画像のURL),url(画像のURL),url(画像のURL);
	background-repeat: no-repeat, no-repeat, repeat;
	background-position:left,right,right;
	margin: 0 auto;
	padding:20px 0 20px 0;
	text-align: left;
	font-size: 13px;
	line-height: 25px;
	color: #6E0000;
}
#text-area dl{
	margin-bottom:10px;
}
#text-area dt {
	float: left;
	clear:both;
	width: 20%;
	margin-left:5%;
}
#text-area dd {
	margin:0 5% 0 5%;
	overflow: hidden;
}