HTMLで画像を横並びにする方法

横方向の位置を指定するシンプルな並べ方

align=”左右”を追加すると、横方向の位置を指定できる様になります。

CSSプロパティのfloatと同じ効果で、clear=”both”で回り込みを解除するというシンプルな横並び方法です。

<img align="left" src="画像のＵＲＬ" />
<img align="right" src="画像のＵＲＬ" />
<br clear="both">

↑が使えない場合はこう↓して、alignの回り込みを解除します。

<div style="clear:both;"></div>

細かく指定して横並びする方法

style属性を使うので、位置や色などのデザインをcssで細かく指定することができます。floatやmarginなどcssの知識が必要になります。

画像を隙間なく並べる方法

<div style="float:left;">
<img src="画像のＵＲＬ"/>
</div>
<div style="float:left;">
<img src="画像のＵＲＬ"/>
</div>
<div style="float:left;">
<img src="画像のＵＲＬ"/>
</div>
<br clear="both"/>

画像の間にmarginで空間を指定する方法

<div style="float:left; margin: 20px;">
<img src="画像のＵＲＬ"/>
</div>
<div style="float:left; margin: 20px;">
<img src="画像のＵＲＬ"/>
</div>
<div style="float:left; margin: 20px;">
<img src="画像のＵＲＬ"/>
</div>
<br clear="both"/>

tableをレイアウトで利用する方法

tableは表を挿入するタグですが、レイアウトで利用することもできます。縦でも横でも自由に配置できます。

画像を隙間なく並べる方法

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

画像の間に隙間を作る方法

<table cellpadding="0" cellspacing="30"><tbody>
<tr>
<td>
<img src="画像のＵＲＬ" />
</td>
<td>
<img src="画像のＵＲＬ" />
</td>
<td>
<img src="画像のＵＲＬ" />
</td>
</tr>
</tbody></table>

このサイトをフォローする!

@evahks