ブログを書いていると横並びに表示したいことがあります。
スタイルシートを使えば実現可能なのでその方法を検討します。
画像を二つ並べて表示する。
ソース
<p style="float:left;width:calc(50% - 2px)">
<img src="https://stat.ameba.jp/user_images/20230211/08/ussr1917jp/fd/56/j/o1769118415241545420.jpg" alt=""></p>
<p style="float:right;width:calc(50% - 2px)">
<img src="https://stat.ameba.jp/user_images/20230211/08/ussr1917jp/30/96/j/o1769118415241545423.jpg" alt=""></p>
<p style="clear:both;"></p>
結果
ここではpタグを使っています。
widthの指定方法ですがここではwidth:calc(50% - 2px)と計算で求めています。
imgタグに指定する場合はスマホは、うまく表示できないことがあるようです。
もちろんwidth200pxの様に直接値を指定しても構いません。
なお、計算で求める場合は、演算子"-"前後に半角スペースを入れる必要があります。
試行錯誤の結果
<p style="float:left;">
<img alt="" src="https://stat.ameba.jp/user_images/20230211/08/ussr1917jp/fd/56/j/o1769118415241545420.jpg"
width="48%">
<img alt="" src="https://stat.ameba.jp/user_images/20230211/08/ussr1917jp/30/96/j/o1769118415241545423.jpg"
width="48%"></p>
<p style="clear:both;"> </p>
これだとPCもスマホも表示できそうです。