気づき&学び days

ホームページやブログで使う画像

自分のデスクトップパソコンで見るぶんには、表示幅いっぱいにきちんと表示されるのだけれど、

ノートパソコンやタブレット端末で見ると、表示される領域から画像がはみ出て右横の表示領域にまで表示されてしまう。

どの端末で見ても、表示幅いっぱいにきれいに表示できるようにしたい！

このような思いをしたことがありませんか？


今日は、画像を挿入する時に使う（生成される）HTMLタグを少しだけいじれば、

スタイルシートを変えることなく簡単に解決できる方法を紹介しします。


画像を挿入する時に使われるHTMLタグは、一般的に次のようになっています。



このHTMLタグに、次の赤字のタグを追加するだけで、画像の縦横比を保ったまま、表示幅いっぱいに表示されるように画像サイズを自動調整できます。



width:100%; で表示幅いっぱいに表示されます。

100%ではなく90%などにすれば、画像の横幅を表示幅より少しだけ小さく表示できるので、

表示幅いっぱいに表示するのが嫌いな人はお好みの表示サイズにできます。

height:auto; は、画像の縦方向のサイズを自動にすることで、

画像の縦横比を保ったまま、横方向の表示サイズに合わせて画像の高さを自動調整してくれます。

スタイルシートを変更することなく、ホームページやブログに画像を入れる時に重宝する、

どの端末で閲覧されても読者にとって優しい方法です。

今日も最後までお読みくださりありがとうございました。