レスポンシブ・ウェブデザインでの画像表示はサイズが自動変化

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

画面サイズに合わせて画像サイズも自動変化する

画面サイズに合わせて画像サイズも自動変化する(※ソニー製品情報サイトの例)

右図のウェブページでは、上部にある大きなバナー画像の表示サイズが、(ウインドウサイズをある程度小さくすると)描画領域の横幅に合わせて自動的に変化します。

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

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

画像サイズを画面幅やウインドウ幅(=描画領域の横幅)に合わせるだけなら、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要素もウインドウ幅いっぱいに広がって表示されます。

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

いっぱいに広げるのではなく、ある程度の余白を残したい場合:
もし、ウインドウの横幅に対して「80%」の大きさで画像を表示したい場合は、CSSソースを以下のように記述します。
/* ▼記述方法A */
p.resizeimage { width: 80%; }
p.resizeimage img { width: 100%; }
画像を含んでいるブロックレベル要素(ここではp要素)の横幅に、望みの値を指定するだけです。ウインドウ幅が変化すると、画像の表示サイズも常に80%に自動調整されます。上記では外側のブロックレベル要素の横幅で調節していますが、下記のようにimg要素の横幅を直接80%にしても構いません。
/* ▼記述方法B */
p.resizeimage img { width: 80%; }
画像を含んでいるブロックレベル要素(p要素)に対して適用している装飾の都合よって使い分けて下さい。記述方法A・Bそれぞれは、以下のように表示されます。
  • 記述方法Aは、「p要素の横幅が描画領域の80%」&「画像の横幅はp要素の領域全体」
  • 記述方法Bは、「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種類(または数種類)の画像を用意しておき、レスポンシブ・ウェブデザインの方法を使って画像を切り替えることで対処できます。詳しくは、次のページでご紹介いたします。

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