【6日でできるHTML＆CSS入門】フルードイメージ

　近年、Webページはスマートフォンやタブレット、PCなど、さまざまなデバイスで閲覧されるのが当たり前になりました。これに対応するため、画像も画面サイズに合わせて自動的に拡大・縮小できることが重要です。その代表的な手法が「フルードイメージ（fluid image）」です。本記事では、フルードイメージの仕組みと実装方法を、HTMLとCSSのサンプルを用いてわかりやすく解説します。

１．フルードイメージとは

素材のダウンロード

以下のリンクから使用する素材をダウンロードできます。

「img」フォルダーを作成してその中に「flower.png」を保存します。

fluid-imageダウンロード
flower.png

1.1. フルードイメージの概要

フルードイメージとは、画像を画面サイズや親要素の幅に応じて自動的にリサイズする仕組みです。
レスポンシブWebデザインを実現するうえで不可欠な技術の一つです。

用語説明
固定サイズ画像画像サイズが常に一定。小さな画面でははみ出すこともある
フルードイメージ親要素や画面の幅に合わせて画像が自動的に縮小・拡大する

1.2. フルードイメージが未適用の例

まず、画像サイズを固定した場合にどのような問題が発生するか見てみましょう。

サンプルHTML（固定サイズ画像）

ファイル名： lesson41_1.html

<!DOCTYPE html>
<html>
<head>
  <title>固定サイズ画像の例</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>画像（フルードイメージなし）</h1>
  <img src="img/flower.png">
</body>
</html>

表示結果

　PC画面では正しく見えますが、スマートフォンなど画面が小さい場合は画像がはみ出してしまい、全体が見えなくなります。

２．フルードイメージの実装方法

2.1. max-widthを使った画像の自動縮小

　画像をフルードイメージとして扱うには、imgタグに**max-width: 100%;**を指定します。これにより、画像は親要素の幅を超えず、縮小されて表示されます。

サンプルHTML（フルードイメージ）

ファイル名： lesson41_2.html

<!DOCTYPE html>
<html>
<head>
  <title>フルードイメージの例</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    img.fluid {
      max-width: 100%;
      height: auto; /* 縦横比を保つために推奨 */
    }
  </style>
</head>
<body>
  <h1>画像（フルードイメージあり）</h1>
  <img class="fluid" src="img/flower.png" alt="サンプル画像">
</body>
</html>

表示結果

画面幅を縮めると、画像サイズも自動的に縮小され、親要素からはみ出すことがなくなります。

2.2. サンプルHTMLの変更例とその出力

（変更前）

<img src="img/flower.png">

（変更後）

<img class="fluid" src="img/flower.png" alt="サンプル画像">

出力イメージ

  • PC幅：通常サイズで表示
  • スマホ幅：画面幅にフィットし、小さく表示される

2.3. 他のHTMLタグとの組み合わせ

フルードイメージは、<div>など親要素の幅に応じて自動調整されます。
たとえば次のようなレイアウトにも有効です。

<div style="width: 60%;">
  <img class="fluid" src="img/flower.jpg" alt="サンプル画像">
</div>

この場合、親のdivが60%幅なので、画像もそれ以上には広がりません。

３．よく使うCSSプロパティ一覧

プロパティ用途・効果
max-width: 100%;親要素の幅を超えて画像が広がるのを防ぐ
height: auto;画像の縦横比を維持してリサイズできる
width: 100%;親要素幅いっぱいに拡大（※用途により使い分け）

まとめ

  • フルードイメージは、どんなデバイスでも画像が親要素や画面サイズに合わせてリサイズされる技術です。
  • 実装は**max-width: 100%;**をimg要素に指定するだけなので、手軽にレスポンシブ化できます。
  • Webサイトを作る際は、すべての画像にこの設定を入れておくと安心です。

【タグ解説表】

タグ用途
<img>画像の表示
<div>画像の親要素、レイアウト制御用