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

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

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



1.何もしない


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

・サンプル&コード

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




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


align="左右"を追加すると、横方向の位置を指定できるようになります。CSSプロパティのfloatと同じ効果です。最後に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

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


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


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




Sponsored Link

Sponsored Link

1 件のコメント :

  1. 匿名5/01/2014

    HTMLの初心者です。配置方法を大変参考になりました、有難うございます。
    宜しければ、質問をさせて下さい。MYSQL DBから取得された画像をTABLEに格納(表示)したいです。
    (例:12枚で、3枚/行、共4行で表示したい)自動改行についての方法はよくわかりません、ご存知であればご教授していただきたいです。お願いいたします。

    返信削除