レスポンシブに対応した画像調整・サイズ切り替えの実装方法

今回はWeb制作では欠かせないレスポンシブな画像調整について解説します。

各デバイスでWebを閲覧するのが当たり前になった現在、各デバイスごとのレイアウトは不可欠です。

とは言っても、

「いつもメディアクエリを使って画像のレスポンシブデザインを実装している」

「そもそもレスポンシブに画像を切り替える方法ってメディアクエリ以外に何があるの？」

といった感じで、あまりレスポンシブに画像を切り替える方法を把握していないという方も多いのではないでしょうか。レスポンシブデザインを実装するための画像を切り替える方法は大きく分けて下記のように分かれます。

メディアクエリを使う
scrset属性を使う
picture属性を使う

この記事で「レスポンシブに画像を切り替える方法」を3つ理解し、どの方法でもレスポンシブ対応ができるようにしましょう。

1 ①メディアクエリを使う
2 ②srcset属性を使う
3 ③picture要素を使う
4 まとめ

①メディアクエリを使う

メディアクエリとは

メディアクエリとは、主にさまざまなデバイスの種類に応じてWebサイトやアプリの表示を変更したい時に用いる「レスポンシブデザイン」を実装する上では不可欠な仕様です。

メディアクエリを設定することで、各デバイスごとの表示や各デバイスの横幅サイズに合わせた分岐条件を記述することができます。スマートフォン専用ページやPC専用ページのためのCSSを書かずに、1つのスタイルシートだけで複数のデバイス環境に対応できるのが特徴的です。

メディアクエリの使い方

メディアクエリを使う方法としては、主に3つあります。

HTMLでCSSを読み込むタグにmedia属性を記載する
CSS内で@media要素を記載する
CSS内で@importをする時に一緒に記載する

書き方はそれぞれで異なりますが、どの方法を使っても「メディアタイプ」と「メディア特性」を記載するという点は同じです。

メディアタイプとは

メディアタイプとは、実装するコンテンツが出力されであろうPCやスマートフォン、印刷、プロジェクターのような環境を個別に指定することです。具体的には以下のように指定をします。

media=”screen and (min-width:768px)"

1	media=”screen and (min-width:768px)"

　メディアタイプの種類は下記のように分かれますが、レスポンシブデザインを実装する上ではallとscreenを覚えておくとよいでしょう。

all
screen
embossed
handheld
print
projection
screen
speech
tty
tv

メディア特性とは

メディア特性とは、下記のコードの強調部分にあたる「デバイスのサイズ指定」のことです。

media=”screen and (min-width:768px)

1	media=”screen and (min-width:768px)

heightを指定することもできますが、一般的にはwidthを指定することがほとんどです。指定する数値は「ブレイクポイント」という各デバイスごとの表示を指定しています。min-width:100pxでは「横幅100px以上」となり、max-width:100pxでは「横幅100px以下」という見た目の英語とは逆の意味の指定になるため、注意して使いましょう。

メディアクエリの書き方

今回は先述で紹介した「CSS内で@media要素を記載する」方法を使ったメディアクエリの書き方をご紹介します。

@media screen and (max-width: 520px) {
スマートフォン用のCSSを記載
}

@media screen and (max-width: 960px) {
タブレット用のCSSを記載
}
@media screen and (min-width: 960px) {
PC用のCSSを記載
}

@media screen and (max-width: 520px) {

スマートフォン用のCSSを記載

}

@media screen and (max-width: 960px) {

タブレット用のCSSを記載

}

@media screen and (min-width: 960px) {

PC用のCSSを記載

}

メディアクエリは「メディアタイプ」と「ブレイクポイント」を記載するのみのシンプルな書き方です。ブレイクポイントに関しては流行や要件によって異なるため、メディアクエリを書く際にそのたびに確認することをおすすめします。

メディアクエリを使ったレスポンシブデザイン例

今回は以下の条件を満たしたサンプルを制作しました。

widthが960px以上の時に背景の横幅が100%、背景色が黒
widthが960px以下の時に背景の横幅が50%、背景色が赤
widthが520px以下の時に背景の横幅が30%、背景色が青

②srcset属性を使う

srcset属性とは

srcset属性はimgタグなどを使う時などに用いられる、複数の横幅サイズなどを条件として指定し、その条件に基づいて画像を切り替えて表示する要素のことです。横幅の異なる各デバイスごとに異なる画像を表示したい時などに用いられます。

srcset属性の使い方

srcset属性を使うには、前提としてHTML内でビューポートを指定していること求められます。

デバイスピクセル比を条件にする
ビューポートの幅を条件にする

それぞれでどのような違いがあるのかを解説します。

デバイスピクセル比を条件にする

デバイスピクセル比とは、一般的にコーディングで使われるCSSピクセルと、各デバイスごとに決まっている最小のピクセルを比例させたものです。

例えばiPhone12は

CSSピクセル　390×844

デバイスピクセル　1170×2532

であるため、縦幅を基準として比率を計算すると、2532/844で約3がデバイスピクセル比になります。各デバイスごとにこのデバイスピクセル比は異なるため、srcset属性でデバイスピクセル比を基準とした場合には指定した条件と同じ、もしくは条件に近い画像が表示されます。

デバイスピクセル比を条件にした時の書き方

デバイスピクセル比を条件とする場合には、各デバイスピクセル比とその場合に表示したい画像をセットで複数個記載します。デバイスピクセルは単位をxとして記載するのがルールです。

このサンプルコードの場合には、一般的なデバイスでは1xで指定した画像が表示されます。

デバイスピクセル比の高いデバイスの場合には、その比率にもっとも近い画像が読み込まれます。

ウィンドウの幅を条件にする

デバイスピクセル比だけではなく、srcset属性はウィンドウ幅による条件の指定も可能です。デバイスピクセル比とは単位が異なりwを使います。

ウィンドウ幅を条件にした時の書き方

以下のサンプルコードの場合では、下記のような条件を設定しています。

デバイスピクセル比が1の場合、360px幅ではimg-small.jpgが出力され、720pxまでimg-medium.jpgが出力され、それ以上ではimg-large.jpgが表示される。
デバイスピクセル比が2の場合、360px幅ではimg-medium.jpgが出力され、720px幅以上でimg-large.jpgが出力される。

ウィンドウ幅を条件に指定する時には、ビューポート幅のpxをブレイクポイントとして指定します。wを単位としていますが、デバイスピクセル比は考慮されるためそのまま使って問題ありません。

srcset属性を使うタイミング

srcset属性を使うもっとも大きなメリットは、通信量を減らして読み込みを早くすることができることです。img>タグでそれぞれのデバイスで同じ画像を表示する場合、解像度の荒い画像はスマートフォンなどでぼやけてしまうことがあります。

この現象自体は高画質の画像を読み込ませれば解決しますが、この場合通信量が増えて読み込みが遅くなります。srcset属性を使えば、デバイスに合わせて各画像を読み込むため通信量が増えることはありません。スマートフォンなどのデバイスでも高画質な画像を早く読み込むためには、srcset属性を使うのがおすすめです。