CSSの基本（18）

画像の上に文字を重ねる指定方法

スタイルシートで画像を加工する事無く、
画像の上に文字を重ねる指定をします。

画像に文字を重ねる
基準側に 　 ⇒　 　position: relative;
重ねる側に　⇒　　 position: absolute;

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
body {
color: #ff6600;
background: #ffffff
}
h1 {
text-align: center;
color: #ff6600
}
div.base {
position: relative;　　　　　　　/* 文字の位置をずらす距離を指定する基準のボックスにする */
}
div.insidefrog {
position: absolute;　　　　　　/* 本来表示される位置から外れて、自由な位置に表示させる */
top: 30px;　　　　　　　　　　　 /* class=base画像の上から30ピクセルの位置に表示させる */
left: 50px;　　　　　　　　　　　 /* class=base画像の左から50ピクセルの位置に表示させる */
width: 200px;　　　　　　　　　 /* 表示幅を130ピクセルに指定する */
}
-->
</STYLE>
</herd>
<BODY>

<h1>画像の上に文字を重ねる</h1>

<P align="center"><FONT color="#0000ff">本日（２００６年１０月１日）の私の予定は以下の通りです。</FONT></P>

<DIV class="base" align="center">
<IMG src="http://www5b.biglobe.ne.jp/~donbey/MS02_02.GIF" width="353" height="185" border="0"><BR>
<div class="insidefrog">
AM6:00〜6；45<BR>
　 <FONT color="#0000ff">ウオーキングに出ます</FONT>。<BR>
AM8:00〜PM17：00<BR>
　<FONT color="#0000ff">仕事をしています。<BR>
(ＰＣの前に座っています）</FONT><BR>
PM17:30〜18:00<BR>
<FONT color="#0000ff">ウオーキングに出ます。</FONT>
</div>
</div>
</body>
</HTML>


（画面クリックでWEB上のサイズを見てください。）