画像の大きさを最適化する max-width:100%;

レスポンシブウェブデザインでスマホに対応する際、PCサイト用の画像の大きさのままだと画面からはみ出てしまうことがあります。スマホの解像度は320px程度のため、幅320px以上の画像を掲載している場合、小型スマホでは崩れて表示されるはずです。

これを回避するには、全ての画像の大きさを300px程度で作成すればよいわけですが、ガラケーサイトとは違いスマホはフルブラウザのため、スタイルシートで表示を最適化することができます。

具体的には、レスポンシブウェブデザインでPCサイト用とスマホ用のCSSを切り分けたのち、スマホ閲覧時に適用されるCSSの「img」の箇所に「max-width:100%;」などと指定しておくとよいでしょう。

画像の大きさを最適化する例

img {
max-width: 100%;
height: auto;
}

この「max-width:100%;」は、「画像の大きさの最大値」が「親要素のwidth幅の100%の値」という意味になります。

そのため、画像が親要素の幅よりも大きくなることはなく、スマホ画面内に収めることができます。また、このままでは横幅のwidth幅だけが縮小されてしまい、高さが調整されずに画像が歪んでしまうため、「height:auto;」も指定して高さも最適化します。

この「max-width」はあくまで最大値の意味のため、もともとの画像の大きさがスマホ画面内に収まる200px程度の場合には拡大されずにそのまま表示されます。500pxなどのはみ出る大きさの場合にのみ、縮小して表示されると考えておくとよいでしょう。

「max-width:100%;」は親要素より大きい場合のみ縮小される

例えば、幅「200px」高さ「300px」のdiv要素があったとします。

#sample {
width:200px;
height:300px
}

この領域に、幅「100px」高さ「100px」の画像を掲載しました。

<img src="blue.png" width="100" height="100" />

すると、当然このように表示されます。

ここで画像に「max-width:100%;」を指定します。

img {
max-width:100%;
}

すると何も変わりません。

これは「親要素のwidth幅が200px」のため、画像のwidth幅の「最大値」も200pxにはなりますが、あくまで「最大値」であるため、実際の画像のwidth幅が100pxで200px以内に収まっている場合には拡大されずにそのままの大きさで表示されるからです。

同様に「max-width:200%;」としても、親要素の幅200pxの200%で400pxが最大値の意味になり、これも400px以内に収まっている場合にはそのまま表示されます。

次に「max-width:25%;」に変更してみました。

img {
max-width:25%;
}

この場合、親要素200pxの25%で幅50pxが最大値になります。そのため、青い100pxの画像はwidth幅が最大値の50pxまで縮小して表示されます。ただし、これではwidth幅のみが縮小されて画像が歪んでしまうため、「height:auto;」も指定します。

img {
max-width:25%;
height:auto;
}

すると高さも自動で調整されてこのように表示されます。

ただし、max-widthを25%にしても、必ずしも画像の大きさが縮小されるわけではなく、あくまで画像の大きさが親要素のwidth幅の最大値を超えた場合のみ縮小されます。例えば、この青い画像が100pxではなく、10pxだった場合はそのまま表示されます。

次に、親要素200pxよりも大きい、幅「250px」高さ「250px」の画像を用意しました。

<img src="orange.png" width="250" height="250" />

この画像を幅「200px」高さ「300px」のdiv要素に掲載するとはみ出てしまいます。

スマートフォンで表示した際、画像がはみ出てしまうのはこのパターンが多いかもしれません。

このような場合、上記のように画像に「max-width:100%;」と「height:auto;」を指定すると、以下のように親要素の領域内に縮小されて表示されるようになります。

スマホ用に画像の大きさを最適化する場合、画像にこの「max-width:100%;」と「height: auto;」を指定しておくとよいでしょう。

画像に「width:100%;」は使わない方がよい

画像に「max-width:100%;」ではなく、単に「width:100%;」と指定した場合、はみ出るか否かに関わらず、画像の大きさを親要素のwidth幅まで無条件で拡大させることができます。この場合でも「height:auto;」を指定することで画像が歪まずに表示することができます。

「max-width:100%;」の場合は最大値の意味のため、実際の大きさ以上には表示されませんが、この「width:100%;」を指定すると画像が領域の最大まで拡大して表示されます。

けれども、この「width:100%;」を指定した場合、「1px」などの小さな画像も拡大してしまうデメリットがあります。

サイト内ではアフィリエイト広告やアクセス解析などで小さな「1px」の画像を使用することも多いですが、「width:100%;」を指定した場合、この「1px」の画像についても領域の最大値まで拡大されてしまい、もしその画像に色がついていない場合は大きな空白の領域が表示されてしまうことになります。

また、小さな画像を拡大させてしまうと画質がぼやけてしまうため、画像に「width:100%;」を指定をするのは避けた方がよいでしょう。

小さな画像を拡大させて表示させるのではなく、あらかじめ大きめの画像を使用し、はみ出る部分については「max-width:100%;」と「height: auto;」で縮小させて表示させることをおすすめします。

スマホ閲覧時にデバイス幅まで画像を最大化する方法

レスポンシブウェブデザインで画像を最大化する場合、親要素にpaddingを指定しているとデバイス幅まで拡大させることができません。

親要素にpaddingを設定している分、左右に余白が生じてしまうことになります。

この場合、一旦、親要素のpaddingを解除することをおすすめします。

このように左右の余白を解除して画像をデバイス幅まで拡大させたのち、改めてpタグやタイトルタグなどにpaddingを設定していくとよいでしょう。

ここで画像にもpタグを設定してしまうと同じように余白ができるため、画像には<div>や<span>などのタグを設定することをおすすめします。