6日でできる 新HTML&CSS入門｜画面幅に合わせて画像を縮小する方法
画像が画面からはみ出さないだけで、ページはぐっと見やすくなる。
max-widthとheightを使って、どの端末でも自然に縮小される画像を作ろう。
Webページでは、文章だけでなく画像も大切な情報です。商品写真、プロフィール画像、イメージ画像、説明図など、画像を使うことでページの内容を分かりやすく伝えられます。
しかし、画像には注意点もあります。パソコンではきれいに表示されていても、スマートフォンで見ると画像が画面からはみ出してしまうことがあります。横に大きな画像がそのまま表示されると、ページ全体に横スクロールが発生したり、画像の一部しか見えなくなったりします。
この問題を防ぐために使われる考え方が、フルードイメージです。フルードイメージとは、画像を画面幅や親要素の幅に合わせて、自動的に縮小できるようにする方法です。レスポンシブWebデザインでは、画像もレイアウトの一部として柔軟に変化させる必要があります。
実装方法はとてもシンプルです。imgにmax-width: 100%;とheight: auto;を指定するだけで、画像が親要素の幅を超えて広がりにくくなり、縦横比を保ったまま縮小されます。
この記事では、固定サイズ画像で起こりやすい問題、フルードイメージの基本、max-widthとheightの使い方、親要素との関係、実際のHTMLサンプルを使った確認方法まで、順番に分かりやすく解説していきます。
素材のダウンロード
以下のリンクから使用する素材をダウンロードできます。
※ウイルス対策ソフト ESET でチェックしておりますが、ダウンロードは自己責任でお願いします。
| sample-photo.png |
|---|
 |
フルードイメージとは何か
フルードイメージとは、画面幅や親要素の幅に合わせて、画像の表示サイズを柔軟に変える方法です。fluidには「流動的な」という意味があり、固定された大きさではなく、表示できる範囲に合わせて自然に変化するイメージです。
通常、画像には元のサイズがあります。たとえば、横幅が1200pxある画像をそのまま表示すると、横幅の広いパソコンでは問題なく見えるかもしれません。しかし、横幅が390px程度のスマートフォンでは、画像が画面から大きくはみ出してしまうことがあります。
そこで、CSSで画像の最大幅を制限します。画像が親要素より大きい場合は縮小し、親要素に収まるように表示します。一方で、画像がもともと小さい場合は、必要以上に拡大されないようにできます。
| 種類 | 表示の特徴 |
|---|---|
| 固定サイズ画像 | 画像の元サイズのまま表示され、狭い画面でははみ出すことがある |
| フルードイメージ | 親要素や画面幅に合わせて、画像が自動的に縮小される |
フルードイメージは、レスポンシブWebデザインではとても基本的な指定です。ページ全体をスマートフォン対応にしていても、画像がはみ出してしまうと見た目が崩れてしまいます。そのため、画像にもレスポンシブ対応を入れておくことが大切です。
図1：固定画像とフルードイメージの違い
この図から分かること
固定サイズの画像は、スマートフォンのような狭い画面では横にはみ出すことがあります。一方、フルードイメージにすると、画像が親要素や画面幅に合わせて縮小されます。レスポンシブWebデザインでは、文章やレイアウトだけでなく、画像も柔軟に調整することが大切です。
画像がはみ出す原因
画像が画面からはみ出す原因は、画像の表示幅が画面や親要素の幅より大きいことです。
たとえば、横幅が1000pxの画像をそのまま表示した場合、パソコンでは問題なく見えることがあります。しかし、スマートフォンの画面幅が400px前後の場合、画像の横幅のほうが大きいため、ページからはみ出してしまいます。
HTMLでimgを書いただけの場合、画像は基本的に元のサイズで表示されます。CSSで幅を制御していない場合、画面幅に合わせて自動的に縮小されるとは限りません。
| 状況 | 起こりやすい問題 |
|---|---|
| 大きな画像をそのまま表示する | スマートフォンで横にはみ出す |
| imgに幅の制限がない | 画像の元サイズで表示される |
| 親要素より画像が大きい | レイアウト全体が崩れる |
| viewport設定がない | スマートフォンで縮小表示され、確認しづらくなる |
画像を扱うときは、imgにCSSを指定して、親要素の幅を超えないようにすることが大切です。
固定サイズ画像のサンプル
まずは、フルードイメージを設定していない画像の例を確認します。ここでは、imgフォルダーの中にsample-photo.pngという画像を保存している想定で説明します。
このサンプルでは、imgに特別なCSSを指定していません。そのため、画像は元のサイズで表示されます。
ファイル名： lesson41_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>固定サイズ画像の確認</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>画像をそのまま表示する例</h1>
<img src="img/sample-photo.png" alt="カフェのテーブルに置かれた花の写真">
</body>
</html>
ブラウザの表示例
パソコンのように画面幅が広い場合は、画像全体が問題なく表示されることがあります。しかし、スマートフォンなど画面幅が狭い環境では、画像が横にはみ出す可能性があります。
画像が画面からはみ出すと、ページに横スクロールが発生しやすくなります。ユーザーは左右にスクロールしないと画像全体を見られないため、読みづらいページになってしまいます。
この状態を防ぐために、CSSで画像の最大幅を調整します。
viewportも忘れずに指定する
レスポンシブWebデザインでは、画像のCSSだけでなく、viewportの設定も重要です。head内に次の指定を入れることで、スマートフォンでも端末幅に合わせた表示になりやすくなります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">この指定では、ページの幅を端末の画面幅に合わせ、初期表示倍率を1.0にしています。スマートフォン対応のHTMLでは、基本として入れておきたい指定です。
| 指定 | 意味 |
|---|---|
| width=device-width | ページ幅を端末の画面幅に合わせる |
| initial-scale=1.0 | 初期表示倍率を1.0にする |
viewportがない場合、スマートフォンでもパソコン向けの広い画面として表示されることがあります。画像を画面幅に合わせる前提として、viewportの指定も確認しておきましょう。
max-width: 100%;で画像のはみ出しを防ぐ
画像を画面幅や親要素の幅に合わせて縮小するには、imgにmax-width: 100%;を指定します。
img {
max-width: 100%;
}max-widthは、要素の最大幅を指定するCSSです。max-width: 100%;を指定すると、画像は親要素の幅を超えて広がらないようになります。
ここで大切なのは、width: 100%;とは少し動きが違うことです。
| 指定 | 特徴 |
|---|---|
| max-width: 100%; | 画像が親要素より大きい場合は縮小する。小さい画像は基本的に元サイズのまま |
| width: 100%; | 画像を親要素の幅いっぱいに表示する。小さい画像も拡大されることがある |
フルードイメージでは、まずmax-width: 100%;を使うのが基本です。大きな画像は縮小し、小さな画像は無理に拡大しないため、自然な表示になりやすいです。
height: auto;で縦横比を保つ
画像を縮小するときに大切なのが、縦横比を保つことです。横幅だけを変更して高さが固定されていると、画像が縦に伸びたり、横につぶれたりすることがあります。
そのため、max-width: 100%;と合わせてheight: auto;を指定します。
img {
max-width: 100%;
height: auto;
}height: auto;を指定すると、横幅に合わせて高さも自動調整されます。これにより、画像の比率を保ったまま縮小できます。
| CSS | 役割 |
|---|---|
| max-width: 100%; | 親要素の幅を超えないようにする |
| height: auto; | 画像の縦横比を保つ |
画像のレスポンシブ対応では、この2つをセットで覚えておくと安心です。
図2：max-widthとheightで画像を自然に縮小する
この図から分かること
max-width: 100%;を指定すると、画像は親要素の幅を超えて広がりません。height: auto;を合わせて指定すると、画像の縦横比を保ちながら縮小されます。この2つを組み合わせることで、スマートフォンでも画像が自然に画面内へ収まりやすくなります。
フルードイメージのサンプル
次に、画像にCSSを指定して、画面幅に合わせて縮小されるようにします。imgにclassを付け、CSSでmax-width: 100%;とheight: auto;を指定します。
ファイル名： lesson41_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フルードイメージの確認</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
line-height: 1.6;
}
.fluid-image {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>画像を画面幅に合わせて表示する例</h1>
<img class="fluid-image" src="img/sample-photo.png" alt="カフェのテーブルに置かれた花の写真">
</body>
</html>ブラウザの表示例
ブラウザの幅が広い場合、画像は元のサイズ、または親要素に収まる範囲で表示されます。画面幅を狭くすると、画像は親要素の幅に合わせて自動的に縮小されます。
スマートフォンのように画面幅が狭い場合でも、画像が横にはみ出しにくくなります。横スクロールも発生しにくくなり、ページ全体が読みやすくなります。
サンプルコードの変更点
固定サイズ画像のサンプルと、フルードイメージのサンプルの違いは、classとCSSの有無です。
変更前は、imgにCSSを指定していません。
<img src="img/sample-photo.png" alt="カフェのテーブルに置かれた花の写真">変更後は、imgにclassを付けています。
<img class="fluid-image" src="img/sample-photo.png" alt="カフェのテーブルに置かれた花の写真">そして、CSSで次のように指定しています。
.fluid-image {
max-width: 100%;
height: auto;
}この指定によって、画像が親要素の幅を超えないようになります。height: auto;も指定しているため、画像の縦横比が崩れません。
親要素の幅に合わせて画像が変化する
フルードイメージは、画面幅だけでなく、親要素の幅にも影響されます。imgにmax-width: 100%;を指定した場合、画像は親要素の幅を超えないように表示されます。
たとえば、画像を幅60%のdivの中に入れると、画像はそのdivの幅を超えません。
<div class="photo-area">
<img class="fluid-image" src="img/sample-photo.png" alt="カフェのテーブルに置かれた花の写真">
</div>
.photo-area {
width: 60%;
}
.fluid-image {
max-width: 100%;
height: auto;
}この場合、画像の最大幅はphoto-areaの幅になります。親要素が画面幅の60%なら、画像もその範囲内で表示されます。
| 親要素の指定 | 画像の表示 |
|---|---|
| 親要素の幅が100% | 画像は画面幅に近い範囲まで表示できる |
| 親要素の幅が60% | 画像はその60%幅の中に収まる |
| 親要素にmax-widthがある | 画像もその最大幅を超えにくい |
フルードイメージは、imgだけを見るのではなく、親要素の幅も一緒に確認すると理解しやすくなります。
図3：画像は親要素の幅に合わせて縮小される
この図から分かること
max-width: 100%;を指定した画像は、親要素の幅を基準にして表示されます。親要素が広ければ画像も広く表示でき、親要素が狭ければ画像も縮小されます。画面幅だけでなく、画像を包んでいるdivなどの幅も、表示サイズに影響します。
width: 100%;との使い分け
画像のレスポンシブ対応では、width: 100%;を使う場合もあります。ただし、max-width: 100%;とは動きが違います。
width: 100%;は、画像を親要素の幅いっぱいに広げます。そのため、画像が小さい場合でも、親要素に合わせて拡大されることがあります。画像を常に横幅いっぱいに見せたい場合には便利ですが、元画像が小さいと画質が粗く見えることがあります。
一方、max-width: 100%;は、画像の最大幅を親要素以内に制限します。大きな画像は縮小されますが、小さな画像は無理に拡大されにくいです。
| 指定 | 向いている場面 | 注意点 |
|---|---|---|
| max-width: 100%; | 画像のはみ出しを防ぎたいとき | 小さい画像は横幅いっぱいにならない場合がある |
| width: 100%; | 親要素いっぱいに画像を広げたいとき | 小さい画像を拡大すると粗く見えることがある |
| height: auto; | 縦横比を保ちたいとき | widthやmax-widthと一緒に使うと分かりやすい |
初心者のうちは、画像のはみ出し対策としてmax-width: 100%;とheight: auto;をセットで覚えるとよいです。
alt属性も忘れずに指定する
画像を表示するときは、alt属性も大切です。altは、画像が表示されない場合や、スクリーンリーダーで読み上げる場合に使われる代替テキストです。
<img class="fluid-image" src="img/sample-photo.png" alt="カフェのテーブルに置かれた花の写真">altには、画像が何を表しているのかを簡潔に書きます。装飾だけの画像で、内容として意味を持たない場合は空のaltを使うこともありますが、学習段階では「画像の内容を説明する属性」として理解しておくとよいです。
| 属性 | 役割 |
|---|---|
| src | 表示する画像ファイルの場所を指定する |
| alt | 画像の代替テキストを指定する |
| class | CSSを適用するための名前を付ける |
レスポンシブ対応ではCSSに注目しがちですが、HTMLとして正しく画像を扱うことも大切です。
よく使うタグとCSSプロパティ
画面幅に合わせて画像を縮小するときによく使うタグやCSSを整理しておきます。
| タグ・CSS | 用途 |
|---|---|
| img | 画像を表示する |
| div | 画像を包む親要素として使える |
| src | 画像ファイルの場所を指定する |
| alt | 画像の代替テキストを指定する |
| class | 画像にCSSを適用するための名前を付ける |
| max-width: 100%; | 画像が親要素の幅を超えるのを防ぐ |
| height: auto; | 画像の縦横比を保つ |
| width: 100%; | 画像を親要素の幅いっぱいに広げる |
| viewport | スマートフォンで端末幅に合わせて表示する |
画像をレスポンシブ対応にするときは、imgだけでなく、親要素の幅、viewport、余白、画像ファイル自体の大きさも確認すると、より安定した表示になります。
画像をレスポンシブ対応にするときの確認ポイント
画像を画面幅に合わせて縮小できるようにしたら、実際にブラウザで表示確認を行います。パソコンのブラウザ幅を狭くしたり、デベロッパーツールでスマートフォン幅を確認したりすると、画像がはみ出していないかチェックできます。
| 確認すること | チェック内容 |
|---|---|
| スマートフォン幅 | 画像が画面からはみ出していないか |
| パソコン幅 | 画像が不自然に大きくなりすぎていないか |
| 縦横比 | 画像がつぶれたり伸びたりしていないか |
| 横スクロール | ページ全体に不要な横スクロールが出ていないか |
| 親要素の幅 | divなどの幅に合わせて画像が収まっているか |
| alt属性 | 画像の内容が分かる代替テキストになっているか |
特にスマートフォン幅では、画像が横にはみ出していないかを必ず確認しましょう。画像が1枚でもはみ出すと、ページ全体に横スクロールが出ることがあります。
フルードイメージを使うとレスポンシブ対応が安定しやすい
Webページでは、画像のサイズがレイアウトに大きく影響します。文字やボックスをレスポンシブ対応にしていても、画像が固定サイズのままだと、スマートフォンで画面からはみ出してしまうことがあります。
そのため、画像にはmax-width: 100%;とheight: auto;を指定して、親要素の幅に合わせて自然に縮小できるようにしておくと安心です。大きな画像は画面幅に合わせて縮小され、縦横比も保たれるため、スマートフォンでも見やすいページになります。
画像を扱うときは、imgのsrcとaltを正しく指定し、必要に応じてclassを付けてCSSを適用します。さらに、親要素の幅やviewportの設定も確認すると、より崩れにくいレスポンシブページを作れます。
フルードイメージは、実装が簡単で効果の大きいレスポンシブ対応です。Webサイトを作るときは、画像がどの画面幅でも自然に収まるように、早い段階で設定しておくとよいでしょう。