キャンペーンサイトなどに有用

こちらも忘れがちなので、メモ。

デザインがやたらに凝っていたりする際にはざくっと背景に画像を敷いてテキスト要素は position:relative; や position:absolute; で好きな所に表示させるのが楽。

手抜きに見えるが、ソースもスッキリ奇麗になるのでいいと思う。

ソース

CSS

#main .dn {display:none;}
#main .frm_02 {width:990px;height:459px;background:transparent url(/common/images_ar/oc/img_02.jpg) repeat 0px 0px;position:relative;}
	#oc .frm_02 .txt01 {width:250px;height:115px;position:absolute; top:345px; left:75px;white-space: nowrap;line-height: 170%;}
	#oc .frm_02 .txt02 {width:250px;height:100px;position:absolute; top:345px; left:382px;white-space: nowrap;line-height: 170%;}
	#oc .frm_02 .txt03 {width:250px;height:100px;position:absolute; top:345px; left:682px;white-space: nowrap;line-height: 170%;}

HTML

<div id="main">
	<div class="frm_02">
		<h3 class="dn">あああああああああああ</h3>
		<p class="txt01">いいいいいいいいいいいいい</p>
		<p class="txt02">ううううううううううううう</p>
		<p class="txt03">えええええええええええええ</p>
	</div>
</div>