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;
}

#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;

}

※dlタグ等が不要な方は削除して使ってください。

背景の重ね方について

background:urlの部分でカンマ区切りに画像のURLを追加していくことで階層を重ねる事が出来ます。
左に行くにつれて上の階層になり右に行くにつれて下の階層になります。
repeat、positionについても同様にカンマ区切りで個別に指定します。

4.まとめ

HTMLにボックス等を複数作らずに背景を複数設置出来るので、コードもすっきりしてくると思います。
その他にもいろいろと使い勝手がいいのでオススメです。

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