initial-scale=1.0">)を使用時、スマートフォン用の一般的な画面幅(320px)を超えるサイズの画像が配置してあると、画面のレイアウトが大きく崩れてしまい、「モバイルフレンドリーテスト」でも、「コンテンツの幅が画面の幅を超えています」と警告されてしまいます。その為、スマートフォン用のスタイルシートでは、あらかじめ画像のサイズが画面幅を超えたどきには、どのように表示するのかを指定する必要があります。元々の画像サイズが全て320pxを超える場合は、以下のように指定すれば、綺麗に画面内に収まります。{max-width:100%;}「max-width」は、最大値の設定です。画面の幅が960pxあって、画像の幅が1280pxあるときは、画面幅の最大値「960px」で画像は表示されます。画面の幅が960pxあって、画像の幅が280pxしかない場合は、画像はそのままのサイズ「280px」で表示されます。様々なサイズの画像が混同している時は...画像サイズを「width:50%」や「width:600px」のように上記以外の方法で指定すると、スマホ表示では、画像が親要素の幅に引き伸ばされぼやけてしまったり、画面から画像がはみ出てしまいます。様々な条件でそうせざるを得ない場合もあるでしょう。そんなときは、imgタグに一つずつCSSを指定するなどの工夫が必要となります。