フォノクラフト株式会社:作業メモや備忘録など

作業メモや備忘録など…

[CSS]画像を敷いてテキストを任意の位置に表示させる

without comments

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

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

デザインがやたらに凝っていたりする際にはざくっと背景に画像を敷いてテキスト要素は 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>