複数の画像を横に並べて表示したいとき、どんな方法があるのか気になって調べてみました。
はてなブログ上では、複数の画像は横並びボタンを選択すれば自動で並べて表示してくれるのですが、他の環境だとその機能が無いことも。
imgタグを並べて書くと画像はPCでは並んで表示されていますが、スマホでは自動折り返しで縦並び表示されたりします。(※)
スマホでも横並びのままにしたい場合、tableタグで表を作って、と試してみます。(※)
※参照したのはこちらのサイト：
CSSやhtmlで画像を横並び2列にする方法３選（レスポンシブ対応）-マンガでわかるホームページ作成
https://csshtml.work/img-3sidebyside/
tableタグだと横並びで表示されるのですが、スマホ画面だと見切れていて一枚目の画像しか見えてないことがあります。
画像サイズはPCだとマウスでも調整できるらしいのですが。
試しにいろいろやってみようと。
画像サイズをimgタグにwidth=””でいろいろ指定してみようと思います。
元の画像サイズは322×320です。
▽普通に画像2枚挿入
PCプレビューでも折り返されている？
▽tableタグで並べてみる
|
|
|
▽width="50"
▽width="400"
▽width="50%"
▽width="100%"
▽width="100" height ="150"
▽他の環境だとこう見えたり
にゃんこ大活躍でした。
テイクさんありがとうございました。
