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

サンプルイメージ
サンプルイメージ
サンプルイメージ

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



1.何もしない


何もせずimgタグを並べます。
画像の大きさと表示場所にスペースがあれば横並びで表示されます。

・サンプル&コード

サンプルイメージ サンプルイメージ サンプルイメージ




2.align属性を利用した画像の並べ方


align="左右"を追加すると、横方向の位置を指定できるようになります。
最後にbr clear="both"で解除するだけのシンプルなものです。
細かい配置の自由度はありませんが、簡単さがミソ。


・サンプル&コード

サンプルイメージ サンプルイメージ



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



3.style属性を利用した画像の並べ方


style属性は、位置や色などのデザインをcssで細かく指定できます。
そのため、floatやmarginなど少しだけcssの知識が必要になります。


サンプル&コード1  サンプル&コード2  サンプル&コード3

サンプルイメージ
サンプルイメージ
サンプルイメージ


サンプルイメージ
サンプルイメージ
サンプルイメージ
サンプルイメージ
サンプルイメージ
サンプルイメージ




4.tableタグを利用した画像の並べ方


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


サンプル&コード1  サンプル&コード2  サンプル&コード3

サンプルイメージ サンプルイメージ サンプルイメージ


サンプルイメージ サンプルイメージ サンプルイメージ

サンプルイメージ サンプルイメージ サンプルイメージ
サンプルイメージ サンプルイメージ サンプルイメージ
サンプルイメージ サンプルイメージ サンプルイメージ



画像の位置は<td>や<tr>などで調節し、cellpadding、cellspacing、align、valign属性などで微調整します。



0 件のコメント :

コメントを投稿