7. 画像横並べのいろいろな方法

　画像の横並べは、第２章６節で説明しましたが、知識を広くするためには、他の方法を説明しておきます。

7.1 <ul> を使い <li> に inline-block を指定

　この方法は、第２章６節で説明しましたので、適用するときは、そちらを見てください。
　以下、概要を説明します。

<li> には、下記のようにCSSを指定します。

　　li {
　　display : inline-block;
　　width : (写真の幅)px;
　　text-align : center;
　　margin-left : 5px;
　　}
<li> というタグは、ブロックレベル要素のタグなので、縦に並びますが、横には並びません。横に並べるためには、インライン要素にする必要があります。単なるインライン要素にすると幅などが指定できないので、インライン要素でありながら、ブロックレベル要素の機能をもつ inline-block を指定します。
（ブロックレベル要素とインライン要素については、１１節その他のタグなどの中の 11. ブロックレベル要素とインライン要素を見てください。）
<li> と <li> 間は、Default で 5pxの余白ができます。6節では、画像間の余白を10pxにするために li に margin-left:5px を指定しています。

この方法は、下記に示すように li に float : left を指定します。

　　li { 　　width : (写真の幅)px;
　　text-aligh : center;
　　 margin-left : 10px;
　　}
float : left を指定すると　li の右側に余白があると、次の li が入ってきて横に並びます。
<li> と <li> 間は、余白はありません。6節の場合、画像間の余白を10pxにするためには、
li に margin-left:10px を指定する必要があります。
float を使用すると、余白に次のものが入って来てレイアウトが乱れますので、floatの機能が必要なくなったときは、必ず次のタグに clear : both を指定する必要があります。
　サンプル文書で、li のCSS display : inline-block; を float:left に書き換えてIE表示すると下図となります。

写真の右側に余白があるので、次の文章が入ってきています。
文章の回り込みを防止するには、下図のように次のタグに style="clear:both" を記述する必要があります。
この使い方は、現在、ネットで一番多く使われています。筆者は、float を使用するのは好まないので、上の7.1の display:inline-block の使用を推奨しています。

サンプル文章に適用して見ることにします。すると、寸法は、下図のようにする必要があります。
左側の枠のclass セレクターを .ph1 とし、右側のそれを .ph2 とすると、CSSは、下記となります。

　.ph1 {
　　float : left;
　　width : 240px;
　　margin : 0 0 8px 55px;
　　text-align : center;
　}
　.ph2 {
　　float : left;
　　width : 240px;
　　margin : 0 0 8px 10px;
　　text-align : center;
　}
横並べするために、float:left を指定しています。上の図でわかりますが、.ph1 の左サイドの余白は、55px、.ph2 の左サイドの余白は、10pxとしています。
margin-bottom に 8pxを指定していますが、これは、下に来る写真との余白指定です。
HTML文は、

<div class="ph1"><img src="02temizusha.jpg" alt="手水舎の写真" width="240" height="180"><br>手水舎</div>
<div class="ph2"><img src="03shinmon.jpg" alt="随神門の写真" width="240" height="180"><br>>随神門</div>
となります。これで、サンプル文と同じ表示になります。
float を使っていますので、この後のタグに style="clear:both" を記述する必要があります。
上では、左を ph1、右を ph2 としていますが、ph1 一つにした方が作り易いです。そのためには、例えば、ph という枠で囲みます。構造とCSSとは下記のようになります。

　.ph {
　　margin-left : 45px;
　}
　.ph1 {
　　width : 240px;
　　text-align : center;
　}