センタータグって、本当に便利だった。
なんでも、まんなかに配置したければこのタグを使えばよかった。でも！！
「文書のコンテンツや論理構造と表現のルールを分離する」
という意味では、「使わないほうがいいんじゃのぉ？！」ということになるわけで。
で、スタイルシートを使って、今回一番やりたかったのはこれ。
二枚の写真を並べて、真ん中に配置すること。
ミソはDIV.centerの指定
配置する写真の幅を指定すること！そして、「右も左もご勝手に！」というわけでautoにすればいい。
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-5</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
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;
}
DIV.center{
width: 400px;
left: auto;
right: auto;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>写真にタイトルを付けて配置する-5</H2>
<HR>
<P ALIGN="left">
<SPAN>
８．写真横に２枚(中央）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
＝＝＝＝＝＝ここまで
</P>
<DIV CLASS="center">
<div CLASS="photo_H">
<IMG SRC="img_3.jpg" WIDTH="200" HEIGHT="150" ALT="中央1/2"><br>中央 1/2</div>
<div CLASS="photo_H">
<IMG SRC="img_4.jpg" WIDTH="200" HEIGHT="150" ALT="中央2/2"><br>中央 2/2</div>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
なんでも、まんなかに配置したければこのタグを使えばよかった。でも！！
「文書のコンテンツや論理構造と表現のルールを分離する」
という意味では、「使わないほうがいいんじゃのぉ？！」ということになるわけで。
で、スタイルシートを使って、今回一番やりたかったのはこれ。
二枚の写真を並べて、真ん中に配置すること。
ミソはDIV.centerの指定
配置する写真の幅を指定すること！そして、「右も左もご勝手に！」というわけでautoにすればいい。
以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。（画像は用意してください。）
サンプルはここにあります。
<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-5</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
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;
}
DIV.center{
width: 400px;
left: auto;
right: auto;
}
-->
</STYLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>写真にタイトルを付けて配置する-5</H2>
<HR>
<P ALIGN="left">
<SPAN>
８．写真横に２枚(中央）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
＝＝＝＝＝＝ここまで
</P>
<DIV CLASS="center">
<div CLASS="photo_H">
<IMG SRC="img_3.jpg" WIDTH="200" HEIGHT="150" ALT="中央1/2"><br>中央 1/2</div>
<div CLASS="photo_H">
<IMG SRC="img_4.jpg" WIDTH="200" HEIGHT="150" ALT="中央2/2"><br>中央 2/2</div>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>
