soycatのブログ

複数の画像を横に並べて表示したい とき、どんな方法があるのか気になって調べてみました。

環境によっては指定すれば選択した画像を自動で並べてくれる機能がある場合もあります。

・imgタグ画像はPCでは並んで表示されていますが、スマホでは自動折り返しで縦並び表示されたりします。

・スマホでも横並びのままにしたい場合、tableタグで表を作って、と試してみます。

参照したのはこちらのサイト：
CSSやhtmlで画像を横並び2列にする方法3選ｰマンガでわかるホームページ作成
https://csshtml.work/img-3sidebyside/

imgタグを並べて書くと横並びで表示されるのですが、スマホ画面だと見切れていて一枚目の画像しか見えてないことがあります。

試しにいろいろやってみようと。

画像サイズをでいろいろ指定してみようと思います。

▽普通に画像2枚挿入

PCでも折り返されている？

▽tableタグで並べてみる

▽width="50"

▽width="400"

▽width="50%" 

▽width="100%"

▽width="100" height ="150

にゃんこ大活躍でした。


テイクさんありがとうございました。


明日からお買い物マラソンですね。
これから欲しいものまとめたのはこちらの回です。
「そろそろ雨具の準備をしたい」