LOADING

Type to search

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

Share

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

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に拡散していただくととても嬉しいです!

嶋耕作(Kosaku Shima)
嶋耕作(Kosaku Shima)

自然を愛するFXトレーダー、雑食系作家です。たまにデザインの仕事もしています。仕事をしたくない時は、PUPG、人狼ジャッジメント、オースティンのゲームやアニメ、映画へ逃亡します。好きな食べ物は、寿司、ラーメン、タイ料理、トルコ料理、ラム肉。好きなスポーツは、バスケ、プール、散歩。好きな場所は、海、温泉、森、猫の肉球。お酒はほとんど飲みません。

  • 1

1 Comment

Leave a Comment

Your email address will not be published. Required fields are marked *

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Translate »