ちょっと、間があいてしまいましたがCSSの続きです。
ここからが、いよいよ今回やっとできるようになった、写真の配置のパターンです。
その１は、「写真を縦に二枚並べて、文章を回り込ませたい。」
DIV.photo_V_LとDIV.photo_V_Rで写真が左のパターンと右のパターンのスタイルの指定をしています。実は、基本形とおなじ。
写真１、改行、コメント１、写真２、改行、コメント２と並べておいて、DIVで挟めばいいだけ。何でこんなことがわからなかったのだろう・・・。ネットを探してもぴったりのお手本見つからなかったし･･･。
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-3</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
SPAN {
font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_V_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 0px 10px 10px 0px;
font-weight: bold;
}
DIV.photo_V_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 0px 0px 10px 10px;
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>写真にタイトルを付けて配置する-3</H2>
<BR>
<HR>
<div CLASS="photo_V_L">
<img SRC="img_1.jpg" WIDTH="200" HEIGHT="150" ALT="左 1/2"><br>左 1/2<BR><BR>
<img SRC="img_2.jpg" WIDTH="200" HEIGHT="150" ALT="左 2/2"><br>左 2/2
</div>
<P ALIGN="left">
<SPAN>
４．写真縦に２枚、並べる(左側）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝ここまで
</P>
<HR>
<div CLASS="photo_V_R">
<img SRC="img_3.jpg" WIDTH="200" HEIGHT="150" ALT="右 1/2"><br />右 1/2<BR><BR>
<img SRC="img_4.jpg" WIDTH="200" HEIGHT="150" ALT="右 2/2"><br />右 2/2
</div>
<P ALIGN="left">
<SPAN>
５．写真縦に２枚(右側）
</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝
ここまで</P>
</DIV>
</DIV>
</BODY>
</HTML>
ここからが、いよいよ今回やっとできるようになった、写真の配置のパターンです。
その１は、「写真を縦に二枚並べて、文章を回り込ませたい。」
DIV.photo_V_LとDIV.photo_V_Rで写真が左のパターンと右のパターンのスタイルの指定をしています。実は、基本形とおなじ。
写真１、改行、コメント１、写真２、改行、コメント２と並べておいて、DIVで挟めばいいだけ。何でこんなことがわからなかったのだろう・・・。ネットを探してもぴったりのお手本見つからなかったし･･･。
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-3</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
SPAN {
font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_V_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 0px 10px 10px 0px;
font-weight: bold;
}
DIV.photo_V_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 0px 0px 10px 10px;
font-weight: bold;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>写真にタイトルを付けて配置する-3</H2>
<BR>
<HR>
<div CLASS="photo_V_L">
<img SRC="img_1.jpg" WIDTH="200" HEIGHT="150" ALT="左 1/2"><br>左 1/2<BR><BR>
<img SRC="img_2.jpg" WIDTH="200" HEIGHT="150" ALT="左 2/2"><br>左 2/2
</div>
<P ALIGN="left">
<SPAN>
４．写真縦に２枚、並べる(左側）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝ここまで
</P>
<HR>
<div CLASS="photo_V_R">
<img SRC="img_3.jpg" WIDTH="200" HEIGHT="150" ALT="右 1/2"><br />右 1/2<BR><BR>
<img SRC="img_4.jpg" WIDTH="200" HEIGHT="150" ALT="右 2/2"><br />右 2/2
</div>
<P ALIGN="left">
<SPAN>
５．写真縦に２枚(右側）
</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝
ここまで</P>
</DIV>
</DIV>
</BODY>
</HTML>
