タイトル・URLをコピー
記事タイトルレスポンシブに対応した画像調整・サイズ切り替えの実装方法
記事URLhttps://digitor.jp/textbook/responsive-image/
記事タイトルレスポンシブに対応した画像調整・サイズ切り替えの実装方法
記事URLhttps://digitor.jp/textbook/responsive-image/
POINTこの記事をざっくり言うと
メディアクエリを使って画像をレスポンシブ対応させる方法
scrset属性を使ってサイズ調整を行う方法
picture属性をつかって実装する方法
今回はWeb制作では欠かせないレスポンシブな画像調整について解説します。
各デバイスでWebを閲覧するのが当たり前になった現在、各デバイスごとのレイアウトは不可欠です。
とは言っても、
「いつもメディアクエリを使って画像のレスポンシブデザインを実装している」
「そもそもレスポンシブに画像を切り替える方法ってメディアクエリ以外に何があるの?」
といった感じで、あまりレスポンシブに画像を切り替える方法を把握していないという方も多いのではないでしょうか。レスポンシブデザインを実装するための画像を切り替える方法は大きく分けて下記のように分かれます。
- メディアクエリを使う
- scrset属性を使う
- picture属性を使う
この記事で「レスポンシブに画像を切り替える方法」を3つ理解し、どの方法でもレスポンシブ対応ができるようにしましょう。
①メディアクエリを使う
メディアクエリとは
メディアクエリとは、主にさまざまなデバイスの種類に応じてWebサイトやアプリの表示を変更したい時に用いる「レスポンシブデザイン」を実装する上では不可欠な仕様です。
メディアクエリを設定することで、各デバイスごとの表示や各デバイスの横幅サイズに合わせた分岐条件を記述することができます。スマートフォン専用ページやPC専用ページのためのCSSを書かずに、1つのスタイルシートだけで複数のデバイス環境に対応できるのが特徴的です。
メディアクエリの使い方
メディアクエリを使う方法としては、主に3つあります。
- HTMLでCSSを読み込むタグにmedia属性を記載する
- CSS内で@media要素を記載する
- CSS内で@importをする時に一緒に記載する
書き方はそれぞれで異なりますが、どの方法を使っても「メディアタイプ」と「メディア特性」を記載するという点は同じです。
メディアタイプとは
メディアタイプとは、実装するコンテンツが出力されであろうPCやスマートフォン、印刷、プロジェクターのような環境を個別に指定することです。具体的には以下のように指定をします。
|
media=”screen and (min-width:768px)" |
メディアタイプの種類は下記のように分かれますが、レスポンシブデザインを実装する上では
allと
screenを覚えておくとよいでしょう。
- all
- screen
- embossed
- handheld
- print
- projection
- screen
- speech
- tty
- tv
メディア特性とは
メディア特性とは、下記のコードの強調部分にあたる「デバイスのサイズ指定」のことです。
|
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を記載 } |
メディアクエリは「メディアタイプ」と「ブレイクポイント」を記載するのみのシンプルな書き方です。ブレイクポイントに関しては流行や要件によって異なるため、メディアクエリを書く際にその
たびに確認することをおすすめします。
メディアクエリを使ったレスポンシブデザイン例
今回は以下の条件を満たしたサンプルを制作しました。
- 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属性を使うのがおすすめです。
③picture要素を使う
picture要素とは
picture要素は画像サイズ、デバイスの大きさなどの複数の条件下で最適とされる画像を表示するための仕組みです。
picture要素単体の役割で画像の表示を切り替えるわけではなく、picture要素内に覆われたsource要素とimg要素を組み合わせることで画像を表示します。
これにより、picture要素では以下の2つを実装することができます。
- 画面の幅に合わせて表示する画像を変更する
- ブラウザが対応していない画像形式の場合、別の画像を表示する
picture要素の書き方
先述したように、picture要素の中にsource要素とimg要素を導入して囲います。source要素の数に指定はないため、何個入れても大丈夫です。
source要素を使った画像の切り替えは、上から順番に条件に当てはまるものが適用されていきます。条件と一致するものがない場合には次のsource要素へと移動します。source要素のいずれも条件が一致しなかった場合にはimg要素で指定された画像が表示される仕組みです。
属性と書かれているところには、画像の形式やメディアクエリが入ります。
画像の形式を指定
ブラウザが指定の画像形式に対応しているかしていないかで表示画像が変わるのが「type属性」です。
画像形式としての代表例はPNGやJPEG、GIFですが、中にはGoogleが開発した新しい画像形式であるWebP形式というものもあります。
source要素にtype属性を追加すれば、このような形式の画像を表示するしないを設定することができます。
メディアクエリの指定
各デバイスの画面幅に応じて表示する画像を変えることができるのが「media属性」です。
①で紹介したメディアクエリと同じくレスポンシブに画像を切り替えられるものですが、source要素は上から順番に読み込まれるため、並べる順番には注意が必要です。
picture要素を使うタイミング
picture要素の一番の強みはブラウザの対応する画像形式によって画像を変更できることです。
type属性のところで先述したように、ブラウザによっては対応していない画像を使用する場合にも切り替えることができます。
各ブラウザで同じ形式の画像を使うとリンク切れになってしまうこともあるため、さまざまな閲覧ブラウザを想定する場合にはpicture要素で画像をレスポンシブに切り替えることがおすすめです。
まとめ
今回はレスポンシブデザインを実装するための画像の切り替え方法を解説しました。
多様な大きさのデバイスが増えている現在ではレスポンシブデザインへの対応は欠かせません。
メディアクエリは万能に使えますが、画像の読み込み速度を遅くしないで済むsrcset属性やブラウザごとに画像を変更できるpicture要素など、レスポンシブデザインを実装するための手段も使い分けることでよりユーザーの満足度を向上させるWeb制作に繋がります。
今後は目的ごとに各手段を使い分け、適切なレスポンシブデザインのサイトを制作しましょう。
レスポンシブでスライダーを実装する方法(HTML/CSS/jQuery)
Webサイトにレスポンシブレイアウトのスライダーを実装する方法をまとめます。
レスポンシブデザインを制作するためのCSSサンプルコード集
レスポンシブデザインを実装する際に知っておいて損がないCSSの基礎知識を解説します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトルレスポンシブに対応した画像調整・サイズ切り替えの実装方法
記事URLhttps://digitor.jp/textbook/responsive-image/
記事タイトルレスポンシブに対応した画像調整・サイズ切り替えの実装方法
記事URLhttps://digitor.jp/textbook/responsive-image/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。