枠からはみ出す画像をpositionを使わずに配置するテクニック

2008年7月 4日 17:29

まずはサンプルを見てください。↓

サンプル

こういった、「枠からはみ出した画像を配置する」というデザインは多々あると思います。
これを、position: absoluteなどで配置するのは簡単ですが、ドロップシャドウなど半透明部分を使用しないと配置がむずかしい画像の場合、少々やっかいだったりします。

そこで、position: absoluteを使わずに、背景を使用して設定する方法を書いてみたいと思います。

▼EntryMore▼

CSSソース

* {
	margin: 0; padding: 0;
}

html {
	height: 100%;
}

body {
	background: #000 url(bg_rep.gif) center top repeat-x;
	color: #777;
	font-size: 90%;
	height: 100%;
}

#wrap {
	background: url(bg.gif) center top no-repeat;
	text-align: center;
	height: 100%;
}

#wrapInner {
	background: #fff;
	margin: 0 auto;
	text-align: left;
	padding: 0 25px;
	width: 750px !important;
	width: 800px;
	height: 100%;
	zoom: 1;
}
	#wrapInner:after {
		content: ".";
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
	}

#header {
	background: url(bg_head.gif) center top no-repeat;
	margin-left: -25px;
	margin-right: -25px;
	height: 500px;
}
	#header h1 {
		text-indent: -9999px;
	}

#contents {
	border-right: solid 1px #ccc;
	float: left;
	width: 476px;
}
	#contents h2 {
		color: #000;
		font-size: 120%;
		font-weight: bold;
		border-left: solid 4px #f00;
		padding-left: 10px;
		margin-bottom: 12px;
	}

#subContents {
	float: right;
	width: 250px;
}
	#subContents h2 {
		color: #000;
		font-size: 100%;
		font-weight: bold;
		border-bottom: solid 1px #00f;
		margin-bottom: 12px;
	}

HTMLソース

内容はいたって簡単です。
まず、キーとなる画像を用意します。（サンプルでは青い光っぽいやつ）
それを配置し、背景（サンプルでは黒い部分）と、コンテンツの背景（サンプルでは白い部分）をそれぞれ決めて、はみ出し部分の位置をデザインします。

そして、メインビジュアルとなる部分をそのまま白い背景と同じ幅にして（はみ出す部分を削って）一緒に切り出します。
そうすると、以下のような画像になります。
メインビジュアル切り出しイメージ

さて、続いてコンテンツの背景の白い部分"のみ"を非表示にして、青いオブジェクトと、全体の黒い背景だけの画像にし、それを書き出します。
メインビジュアル切り出しイメージ

この2つの画像を書き出したら、あとはそれをずれがないように配置するだけです。
サンプルでは「wrap」のIDのついたDIVに黒いほうを、「header」のIDのついたDIVに白いほうの画像を背景として配置しています。
ここでの注意点としては、どちらの画像もセンタリング配置したときにしっかりと重なるように切り出すことです。

配置方法は、「wrap」の背景は左右センタリング配置し、「header」の背景は左上起点に配置します。
そして、「header」を内包している「wrapInner」をセンタリング配置することで、白い背景の切れた部分と、その下に配置された黒い背景の続きの部分がぴったりと重なり、まるではみ出しているように見えるようになります。