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

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

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

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

 

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

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

 

 

 

 

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

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

 

 

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

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

 

 

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

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

 

 

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

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

 

 

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

<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>

 

 

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

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

 

 

 

この記事を読んだ方はこちらも読まれています

最後まで読んで頂きありがとうございます。

このブログを「いいな」と感じていただけましたら、

下のボタンをクリックしていただくととても嬉しいです^^

ブログランキングに参加しています。応援クリックよろしくお願いします!

にほんブログ村 為替ブログ FXの基礎知識へ

さらに下のボタンからSNSに拡散していただくととても嬉しいです!