画像を横に並べる４つの方法

さて本日は、HTMLで画像を横に並べて配置する方法を４つご紹介します。
なにかと忘れやすいので、簡単なものから説明していきます。

１．何もしない

何もせずimgタグを並べます。imgタグはインライン要素なので、画像の大きさと表示場所にスペースがある限り横並びで表示されます。

・サンプル＆コード

<img src="画像のＵＲＬ" /><img src="画像のＵＲＬ" /><img src="画像のＵＲＬ" />

２．align属性を利用した画像の並べ方

align="左右"を追加すると、横方向の位置を指定できるようになります。CSSプロパティのfloatと同じ効果です。最後にclear="both"で回り込みを解除するだけのシンプルなもの。これだけでは細かい配置の自由度はありませんが、簡単さがミソ。


・サンプル＆コード

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

ちなみに一部のブログなど、<br clear="both">が使えない環境の場合は、<div style="clear:both;"></div>でalignの回り込みを解除します。

３．style属性を利用した画像の並べ方

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

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

<div style="float:left; margin-right: 10px; margin-top: 50px;"> <img src="画像のＵＲＬ"/> </div> <div style="float:left; margin: 5px;"> <img src="画像のＵＲＬ"/> </div> <div style="float:left; margin-left: 100px;"> <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>

<table border="1" cellpadding="0" cellspacing="10" width="350" height="350"><tbody> <tr> <td> <img src="画像のＵＲＬ" /> </td> <td> <img src="画像のＵＲＬ" /> </td> <td> <img src="画像のＵＲＬ" /> </td> </tr> <tr> <td align="left"> <img src="画像のＵＲＬ" /> </td> <td align="right"> <img src="画像のＵＲＬ" /> </td> <td align="center"> <img src="画像のＵＲＬ" /> </td> </tr> <tr> <td valign="top"> <img src="画像のＵＲＬ" /> </td> <td valign="bottom"> <img src="画像のＵＲＬ" /> </td> <td valign="middle"> <img src="画像のＵＲＬ" /> </td> </tr> </tbody></table>

Sponsored Link

	Sponsored Link