これは、参考書にも載っているので、取り上げる必要はないんだけど、基本形なので・・・・。
600ピクセルの幅のページに、1枚の写真にタイトルをつけ右上または左上において、文章を回り込ませたい。
DIV.photo_L が写真左についての指定、DIV.photo_R が写真右についての指定です。
そのなかでのポイント！
文章を右左どっちに回り込ませるかをfloatで指定する。
写真につけるタイトル文字の色大きさなど指定をする。
文章が写真にくっつくと見づらいので、写真と文章のあいだに10ピクセルほどの空間を取りたい。marginで上右下左の順に指定する。
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>タイトル付の写真を配置する-1</TITLE>
<STYLE>
<!--
SPAN {
font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 10px 10px 0px;
font-weight: bold;
}
DIV.photo_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 10px 10px;
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>タイトル付写真と説明文を配置する-1</H2>
<BR>
<div CLASS="photo_L">
<img width="300" SRC="img_1.jpg" HEIGHT="250" ALT="img_1.jpg"><br>左に写真</div>
<P ALIGN="left">
<SPAN>１．左に写真</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝＝＝＝ここまで
</P>
<HR>
<div CLASS="photo_R">
<img width="300" SRC="img_1.jpg" HEIGHT="225" ALT="img_1.jpg"><br>右に写真</div>
<P ALIGN="left">
<SPAN>
２．右に写真
</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝＝＝＝ここまで
</P>
</DIV>
</DIV>
</BODY>
</HTML>
600ピクセルの幅のページに、1枚の写真にタイトルをつけ右上または左上において、文章を回り込ませたい。
DIV.photo_L が写真左についての指定、DIV.photo_R が写真右についての指定です。
そのなかでのポイント！
文章を右左どっちに回り込ませるかをfloatで指定する。
写真につけるタイトル文字の色大きさなど指定をする。
文章が写真にくっつくと見づらいので、写真と文章のあいだに10ピクセルほどの空間を取りたい。marginで上右下左の順に指定する。
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>タイトル付の写真を配置する-1</TITLE>
<STYLE>
<!--
SPAN {
font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 10px 10px 0px;
font-weight: bold;
}
DIV.photo_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 10px 10px;
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>タイトル付写真と説明文を配置する-1</H2>
<BR>
<div CLASS="photo_L">
<img width="300" SRC="img_1.jpg" HEIGHT="250" ALT="img_1.jpg"><br>左に写真</div>
<P ALIGN="left">
<SPAN>１．左に写真</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝＝＝＝ここまで
</P>
<HR>
<div CLASS="photo_R">
<img width="300" SRC="img_1.jpg" HEIGHT="225" ALT="img_1.jpg"><br>右に写真</div>
<P ALIGN="left">
<SPAN>
２．右に写真
</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝＝＝＝ここまで
</P>
</DIV>
</DIV>
</BODY>
</HTML>
