次に、写真を横幅いっぱいに３枚並べる。これも、それほど難しくない。
DIV.photo_H でスタイルを指定しています。
ポイントは、写真を右に並べていくという感じで、float: left;をつかう。
また、幅６００ピクセルのところに、写真を３枚並べるので写真の表示幅を２００ピクセルにしてある。
写真３枚の幅の和がが６００ピクセルを超えると、改行されてしまうので、注意。
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>タイトル付の写真を配置する-2</TITLE>
<STYLE>
<!--
SPAN {
font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_H {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 10px 0px;
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>タイトル付の写真を配置する-2</H2>
<P ALIGN="left">
<SPAN>
３．写真横に３枚並べる
</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
＝＝＝＝＝＝＝＝＝ここまで</P>
<DIV CLASS="photo_H">
<img SRC="img_1.jpg" width="230" HEIGHT="150" ALT="1/3"><BR>1/3</DIV>
<DIV CLASS="photo_H">
<img SRC="img_2.jpg" width="200" HEIGHT="150" ALT="2/3"><BR>2/3</DIV>
<DIV CLASS="photo_H">
<img SRC="img_3.jpg" width="200" HEIGHT="150" ALT="3/3"><BR>3/3</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
DIV.photo_H でスタイルを指定しています。
ポイントは、写真を右に並べていくという感じで、float: left;をつかう。
また、幅６００ピクセルのところに、写真を３枚並べるので写真の表示幅を２００ピクセルにしてある。
写真３枚の幅の和がが６００ピクセルを超えると、改行されてしまうので、注意。
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>タイトル付の写真を配置する-2</TITLE>
<STYLE>
<!--
SPAN {
font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_H {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 10px 0px;
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>タイトル付の写真を配置する-2</H2>
<P ALIGN="left">
<SPAN>
３．写真横に３枚並べる
</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
＝＝＝＝＝＝＝＝＝ここまで</P>
<DIV CLASS="photo_H">
<img SRC="img_1.jpg" width="230" HEIGHT="150" ALT="1/3"><BR>1/3</DIV>
<DIV CLASS="photo_H">
<img SRC="img_2.jpg" width="200" HEIGHT="150" ALT="2/3"><BR>2/3</DIV>
<DIV CLASS="photo_H">
<img SRC="img_3.jpg" width="200" HEIGHT="150" ALT="3/3"><BR>3/3</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
