チェックフィールド株式会社

東京 港区 千代田区 中央区 ITの運用管理やコンサルティング・相談・サポートはにお任せください

スタッフぶろぐ

このエントリをはてなブックマークに登録

F初心者にやさしいHTML講座:複数の画像をレイアウトする

前回に引き続き画像のレイアウト方法をご紹介します。

2点の画像を横に並べる場合は下記のようにすると横に並んで表示されます。

<img src="http://placehold.it/150x130" alt="商品写真左" width="150" height="130" />
<img src="http://placehold.it/150x130" alt="商品写真右" width="150" height="130" />

出力結果

商品写真左
商品写真右

画像と画像のマージンをとる場合は先頭の画像のimgタグ内に

style="margin-right:20px;"

を追加します。最初の画像の右に余白ができます。

出力結果

商品写真左
商品写真右

画像3点を横に並べて、そのグループをセンター寄せにする場合は、画像のimgタグをdivタグで囲って

style="text-align:center;"

を追加します。

<div style="text-align:center;">
<img src="http://placehold.it/150x130" alt="商品写真左" width="150" height="130" style="margin-right:20px;" />
<img src="http://placehold.it/150x130" alt="商品写真真ん中" width="150" height="130" style="margin-right:20px;" />
<img src="http://placehold.it/150x130" alt="商品写真右" width="150" height="130" />
</div>

出力結果

商品写真左
商品写真真ん中
商品写真右

画像の高さが異なる場合は、画像の上辺を揃える

vertical-align:top;

を追加すると、画像の上辺が揃います。

<img src="http://placehold.it/150x130" alt="商品写真左" width="150" height="130"
 style="margin-right:20px; vertical-align:top;" />
<img src="http://placehold.it/200x180" alt="商品写真右" width="200" height="180" />

出力結果

商品写真左
商品写真右

▼関連するタグや属性はこちらを参考にしてください。
http://www.htmq.com/style/margin.shtml
http://www.htmq.com/style/vertical-align.shtml