レスポンシブな画像表示をマスター！幅100%できれいに魅せるHTML・CSS入門

幅100%でレスポンシブな画像表示を行う方法

先生と生徒の会話形式で理解しよう

生徒

「ホームページを作っているのですが、スマホで見ると画像がはみ出てしまったり、パソコンだと小さすぎたりして困っています。」

先生

「それはスマートフォンやタブレットなど、画面のサイズに合わせて自動で大きさが変わるレスポンシブ対応ができていないからですね。」

生徒

「レスポンシブな画像表示にするには、どうすればいいんですか？」

先生

「それでは、CSSを使って画像の横幅を画面や親要素に合わせて100%にする方法を一緒に見ていきましょう！」

1. レスポンシブデザインと画像表示の基礎知識

ホームページを作成する上で、スマートフォン対応は非常に重要な要素です。パソコン向けの大きな画像サイズをそのままスマートフォンで表示してしまうと、画面からはみ出したり、横スクロールが発生したりしてユーザーにとって見づらいサイトになってしまいます。レスポンシブデザインとは、閲覧しているデバイスの画面サイズに応じて、文字の大きさやレイアウト、画像などを自動的に最適化する技術のことです。初心者の方でも簡単に実装できるように、まずは基本的な仕組みからしっかりと理解していきましょう。

2. 画像の幅を100%にするCSSの基本的な書き方

画像が画面からはみ出るのを防ぎ、親要素の幅に合わせて自動で縮小・拡大させるためには、CSSのwidthプロパティに100%を指定するのが最も一般的で確実な方法です。widthとは、HTML要素の横幅を指定するためのCSSプロパティのことです。これにパーセント(%基準)を指定することで、親となる箱の大きさに合わせて可変させることができます。さらに、高さが画像の縦横比を保ったまま自動で調整されるように、heightプロパティにautoを指定するのがプログラミングの定番のテクニックとなっています。


<style>
    .responsive-img {
        width: 100%;
        height: auto;
    }
</style>

<div style="width: 300px; border: 1px solid #ccc;">
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="responsive-img">
</div>

ブラウザ表示

3. マックスウィズを使って画像のサイズ崩れを防ぐ方法

画像を幅100%に設定する際に気をつけておきたいポイントとして、元の画像サイズ以上に引き伸ばされてしまうと画質が荒くなってしまうという問題があります。そこで役立つのがmax-widthプロパティです。max-widthとは、要素がこれ以上大きくならないように最大の横幅を制限するためのCSSプロパティです。このプロパティに100%を指定し、幅を100%にしつつ高さは自動にすることで、スマートフォンなどの狭い画面では画面幅に合わせて縮小し、パソコンなどの広い画面では元の画像サイズ以上に大きくならないように美しく表示させることができます。


<style>
    .max-width-img {
        max-width: 100%;
        height: auto;
    }
</style>

<div>
    <img src="/img/sample120-120.jpg" alt="サンプル画像" class="max-width-img">
</div>

ブラウザ表示

4. オブジェクトフィットを使った画像のトリミングと調整

ウェブサイトのデザインによっては、画像を指定したサイズいっぱいに綺麗に収めたい場合があります。そのようなときに非常に便利なのがobject-fitプロパティです。object-fitとは、imgタグなどの画像や動画を、指定した領域に対してどのように収めるかを調整するためのCSSプロパティです。例えば、coverという値を指定すると、画像の縦横比を崩すことなく、指定したエリアを隙間なく埋めるように切り抜いたような表示にすることができます。これにより、正方形や横長の固定された枠組みの中でも、綺麗に画像を表示させることが可能になります。


<style>
    .fit-img-box {
        width: 100%;
        height: 150px;
        overflow: hidden;
    }
    .fit-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div class="fit-img-box">
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="fit-img">
</div>

ブラウザ表示

5. ブートストラップを活用した簡単なレスポンシブ画像設定

プログラミング初心者の方で、CSSの細かいコードを書くのが少し難しいと感じる場合は、世界中で広く使われているCSSフレームワークであるBootstrap5を活用するのがおすすめです。Bootstrapとは、あらかじめデザインされた便利な部品やスタイルがセットになっている仕組みのことです。画像専用のクラス名であるimg-fluidというクラスをimgタグに追加するだけで、簡単に幅100%かつ高さが自動調整されるレスポンシブな画像表示を実現することができます。自分で複雑なCSSコードを記述しなくても、クラス名を指定するだけできれいなデザインがすぐに完成するため、作業効率が大幅に向上します。


<div class="container p-3 border">
    <p>Bootstrapのクラスを使った画像表示です</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="img-fluid">
</div>

ブラウザ表示

Bootstrapのクラスを使った画像表示です

6. レスポンシブ画像を設定するときの注意点とトラブルシューティング

レスポンシブな画像表示を実装する際にはいくつか注意すべきポイントがあります。まず、大元の親要素に幅の制限がない場合や、親要素が大きすぎると、画像が必要以上に引き伸ばされてしまう原因になります。必ず画像を入れている親となる要素の幅やレイアウトを確認するようにしましょう。また、画像のファイルサイズ自体が大きすぎると、スマートフォンなどのモバイル回線で閲覧した際にページの読み込み速度が遅くなってしまう原因になります。CSSで見た目のサイズを調整するだけでなく、あらかじめ適切な大きさに画像を圧縮したり、alt属性を設定して検索エンジンや視覚障害のあるユーザーにも画像の内容が正しく伝わるように配慮したりすることが、SEO対策としても非常に大切です。


<style>
    .wrapper-box {
        max-width: 400px;
        margin: 0 auto;
    }
    .wrapper-box img {
        width: 100%;
        height: auto;
        display: block;
    }
</style>

<div class="wrapper-box border p-2">
    <img src="/img/sample120-120.jpg" alt="中央寄せされたレスポンシブ画像">
</div>

ブラウザ表示