画像の上に文字を重ねる

本日（２００６年１０月１日）の私の予定は以下の通りです。


AM6:00〜6；45
　 ウオーキングに出ます。
AM8:00〜PM17：00
　仕事をしています。
(ＰＣの前に座っています）
PM17:30〜18:00
ウオーキングに出ます。


このページのソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>CSS覚書</TITLE>
<STYLE type="text/css">
<!--
body {
margin-left:10%;
margin-right:10%;
color:#000000;
background-color:#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>