画像を横に並べる方法

画像を横に並べて表示する方法

画像を横に並べる方法は何種類かあります。
一番簡単な方法ですが、改行を入れずにタグを下記のように記述します。
この場合、画像と画像の間に半角スペースができます。

<img src="画像のurl" />
<img src="画像のurl" />
<img src="画像のurl" />

半角スペースを入れずに表示したい場合は、横に記述していきます。隙間なく画像が並びます。

<img src="画像のurl" /><img src="画像のurl" /><img src="画像のurl" />

タグの間に半角スペースを入れればスペースができますが、このやり方だと画像が多くなるとソースが右に長くなってしまいますネ。

<img src="画像のurl" /> <img src="画像のurl" /> <img src="画像のurl" />

画像を横並びにする場合、画像の幅の合計値がページの横幅をオーバーすると自動的に改行されてタテ並びになってしまいます。

次は画像をtableタグを利用して横に並べる方法です

テーブルのセル毎に画像を入れていきます。cellpadding="0" cellspacing="0"
で隙間なく並びます。

<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="画像のurl" />
</td>
<td>
<img src="画像のurl" />
</td>
<td>
<img src="画像のurl" />
</td>
</tr>
</tbody></table>

画像間のスペースは cellpadding、cellspacingで調整します。
cellspacing, cellpaddingは、tableタグで出来るセル間の隙間です。
下の画像はテーブル内 cellpadding="0" cellspacing="20" です。

 

画像の位置
もっと詳しい cellpadding、cellspacing