レスポンシブ・ウェブデザインでの画像表示

「レスポンシブ・ウェブデザイン」(Responsive Web Design)とは、アクセス者の閲覧環境(画面サイズ)によってレイアウトを自動的に変更するデザインのことです。過去の記事「レスポンシブ・ウェブデザインの簡単な作り方」でもご紹介致しました。

ウインドウサイズに合わせて画像サイズも変化

ウインドウサイズに合わせて画像サイズも変化

先の記事では、SONYの個人向け製品サイト(右図)を例に挙げています。このサイトでは、トップページの上部にある大きなバナー画像の表示サイズが、(ウインドウサイズをある程度小さくすると)描画領域の横幅に合わせて動的に変化します。

今回は、このような「ウインドウ幅に合わせて、(縦横比を維持したまま)画像の表示サイズを変化させる方法」をご紹介致します。レスポンシブ・ウェブデザインを採用したページにはもちろん、そうでない場合でも、「描画領域の横幅全体に画像を広げて掲載したい」場合などに活用できます。

画像の横幅を描画領域の横幅に合わせるだけなら簡単

画像サイズをウインドウ幅(描画領域の横幅)に合わせるだけなら、CSSソースをたった1行書くだけで実現できます。例えば、以下のようにHTMLソースを記述して、1枚の画像を表示させている場合で考えます。
<p class="resizeimage">
   <img src="park.jpg" alt="公園">
</p>
上記では、画像を表示するimg要素を、段落を作るp要素内に記述しているだけです(※ここでのp要素は、body要素の直下にあるものとします)。p要素の代わりに、div要素など他のブロックレベル要素を使っていても構いません。このとき、以下のようにCSSソースを1行だけ書けば、完了です。
p.resizeimage img { width: 100%; }
ウインドウサイズに合わせて画像サイズも変化

ウインドウサイズに合わせて画像サイズも変化

すると右図のように、画像「park.jpg」はウインドウ幅(※)に合わせて、表示サイズが自動的に変化するようになります。ウインドウの横幅を広げれば、画像も(縦横の縮尺を維持したまま)大きく表示されます。ウインドウの横幅を狭めれば、画像も小さく表示されます。

※正確には「ウインドウ幅」ではなく「p要素の幅」に連動します。p要素は、(body要素の直下にあって特に何も装飾しなければ)ウインドウ幅いっぱいに広がりますから、結果的にimg要素もウインドウ幅いっぱいに広がって表示されます。

親要素に影響されずに、描画領域の横幅いっぱいに広げる方法:
先ほどは、数値の単位に「%」を使って「親要素に対する割合」で横幅を指定しました。しかし、CSS3で追加された「vw」(Viewport Width)という単位を使って以下のように記述すると、親要素の横幅に影響されずに、画像を描画領域の横幅いっぱいに広げることができます。
p.resizeimage img { width: 100vw; }
一見すると「%」と同じように思えますが、基準となる横幅が「%の場合は親要素の大きさ」であるのに対して「vwの場合は描画領域の横幅」である点が異なります。この方法で横幅いっぱいに広げた場合は、親要素の横幅が狭くても画像は横方向に突き抜けて表示されます。ただし、親要素の端に余白があったり、スクロールバーが表示されている場合には、横スクロールが必要になる可能性がある点に注意が必要です。

いっぱいに広げるのではなく、ある程度の余白を残したい場合:
もし、ウインドウの横幅に対して「80%」の大きさで画像を表示したい場合は、CSSソースを以下のように記述します。
p.resizeimage { width: 80%; }
p.resizeimage img { width: 100%; }
画像を含んでいるブロックレベル要素(ここではp要素)の横幅に、望みの値を指定するだけです。ウインドウ幅が変化すると、画像の表示サイズも常に80%に自動調整されます。上記では外側のブロックレベル要素の横幅で調節していますが、下記のようにimg要素の横幅を直接80%にしても構いません。
p.resizeimage img { width: 80%; }
画像を含んでいるブロックレベル要素(p要素)の装飾の都合よって使い分けて下さい。
  • 前者は、「p要素の横幅が描画領域の80%」&「画像の横幅はp要素の領域全体」
  • 後者は、「p要素の横幅は描画領域全体」&「画像の横幅はp要素の80%」
……になります。どちらの指定でも「画像の横幅が描画領域の80%になる」という点は同じですが、ブロックレベル要素に背景色を付加している場合などで、表示が異なります。

描画領域の大きさに連動させつつも、最大サイズ・最小サイズを指定したい場合:
そのほか、画像の最大サイズや最小サイズを指定した上で、ウインドウ幅に合わせて自動調整させたい場合は、CSSソースを以下のように記述します。
p.resizeimage {
   max-width: 800px; /* 最大幅 */
   min-width: 240px; /* 最小幅 */
}
p.resizeimage img { width: 100%; }
max-widthプロパティに最大の横幅を、min-widthプロパティに最小の横幅を指定します。上記のように両方指定しても構いませんし、片方だけ指定しても構いません。上記の場合だと、画像の表示サイズはウインドウ幅に合わせて自動伸縮しますが、横幅が800pxより大きくなることはなく、240pxより小さくなることもありません。

サンプルページ
上記のHTML・CSSソースを使って作ったサンプルページ(1)を用意しています。ブラウザのウインドウ幅を変化させて、画像サイズが自動調整されるのを確認してみて下さい。

画像が大きくなりすぎたり小さくなりすぎたりすると困る場合もある

小さくなりすぎると、文字が読めない

小さくなりすぎると、文字が読めない

上記でご紹介した方法だと、右図のように「画像の中に文字が描き込まれている場合」に、文字が小さくなりすぎたり、大きくなりすぎたりする問題があります。

最大値を指定する方法だと、大きくなりすぎるのを防ぐことはできますが、(描画領域が最大値より広い場合には)画像を横幅一杯に表示できなくなります。最小値を指定する方法だと、小さくなりすぎるのを防ぐことはできますが、(描画領域が最小値より狭い場合には)横スクロールが必要になってしまいます。

この問題には、あらかじめ2種類(または数種類)の画像を用意しておき、レスポンシブ・ウェブデザインの方法を使って画像を切り替えることで対処できます。詳しくは、次のページでご紹介致します。

それでは、レスポンシブ・ウェブデザインの方法を使って、画像が小さくなりすぎても困らないようにする方法を見てみましょう。