大きい画像を横に並べる方法

質問

自身のイラストサイトを作っているのですが、分からないことがあります。

イラストをimg srcタグで次々に横に並べて、
横スクロールバーでイラストを見ていく　というデザインにしたいのですが、
（<img src=""><img src=""><img src="">…というふうに）

１つ500ピクセルくらいの大きさのあるイラストを並べるので、
勝手に次の画像が改行？されてしまいます。

画像がずれることなく、横スクロール内に収められる方法はありませんか？
ホームページ作りに関してはあまり知識はないのですが、
どなたかご存知の方いらっしゃいましたら、よろしくお願いします。

ちなみに使っているサーバーはロリポップです。

回答No.2

qualheart · ベストアンサー

<div style="width: xxxx;">
<img src=""><img src=""><img src="">
</div>
のようにDIVタブで囲って、DIVそのものに固定の横幅を付けておいて、その中に画像を並べれば良いと思いますよ。
ご参考まで。

回答No.1

chiune

スタイルシートを使った例です。

<span style="position:absolute; top:100px; left:100px;">
<img src="a01.jpg">
</span>
<span style="position:absolute; top:100px; left:600px;">
<img src="a02.jpg">
</span>
<span style="position:absolute; top:100px; left:1100px;">
<img src="a03.jpg">
</span>

a01.jpg、a02.jpg、a03.jpgの３つの画像の横幅がちょうど500ピクセルで
左端マージン、上端マージンを100ピクセル取った例です。

a02.jpgの場合、100+500でleft:600px
a03.jpgの場合、600+500でleft:1100px

となっています。

数字を小さくすれば画像を部分的に重ねたりもできます。
逆に大きくすれば、画像と画像の間にすき間を入れることもできます。