レスポンシブイメージ入門

sizesを利用する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
sizes属性を使ってレスポンシブイメージが表示されるサイズを指定する方法について学びます。
講師:
04:50

字幕

このレッスンでは sizes 属性を使って レスポンシブイメージが表示される― サイズを指定する方法について学びます sizes 属性をマークアップする時 その HTML で使われている CSS に 注意する必要があります サンプルをブラウザで見てみましょう ビューポートがある程度の幅になると 画像がそれ以上大きくならない 事が分かります 実際に CSS を確認してみましょう エディターで先程の HTML で使っている CSS を開いています この CSS の中には main クラスの セレクタがあります これは全てのコンテンツを ラッピングしているクラスです デフォルトでは左右のマージンに auto が指定されています 更に 左右のパディングに 1em がそれぞれ指定されています ブラウザに戻って 再度確認してみましょう デフォルトのサイズでは 左右に 1em のパディングがあり コンテンツは中央に表示されています 再びエディターに戻って コードを確認して行きましょう ここに 48em を最小の幅とした メディア クエリがあり その中で main クラスに対して max width が 44em に指定されています つまりビューポート全体が 48em 以上の場合 main クラスは 44em より大きくならない という指定です ブラウザで再度確認しましょう ビューポートが一定の大きさ 48em 以上になると コンテンツがラッピングされている main クラスは 44em の幅で固定されています さて この時画像はどういう大きさに なっているでしょうか Firefox の開発ツールを使って 確認してみましょう 右クリックから「要素を調査」を選んで 確認してみます 画像は 792px の幅であることが分かります エディターに戻り 今度は HTML を開きます 先程確認したように画像は CSS の指定によって 792px より大きいサイズでは表示されません しかし HTML では この img タグの srcset 属性に 800px よりも大きいサイズの 画像も用意しています ここで sizes 属性の出番です img タグの最後に sizes 属性を 追加してみましょう Enter で改行し sizes 属性を入力します 綴りは sizes です この " " の中に値を入力して行きます まずは メディア条件を設定します min-width ミニマム ウィッズ 48em と設定し 表示する幅は 800px とします これはビューポートの幅が 48em 以上の場合は 画像を 800px として表示する という意味になります 更に 条件が満たされない時の 幅を指定しておきましょう ここでは 100vw と指定します 複数の値はカンマで区切ります 保存して確認してみましょう ブラウザで再読み込みを行って ビューポートの幅を変形させても 画像は 800px のものから 変わらなくなっていることが分かります そしてビューポートの幅が小さくなった時 600px よりも小さくなった時だけ 画像が入れ替わっています このレイアウトでは元々 CSS によって 792px よりも大きく画像が 表示されることはなかったので sizes 属性によって 実際の表示に必要な画像だけが 読み込まれるようになりました このレッスンでは sizes 属性を使って レスポンシブイメージが表示される サイズを指定する方法について学びました

レスポンシブイメージ入門

このコースではレスポンシブWebデザインにおける画像の取り扱い方やレスポンシブイメージについての考え方、またその実装方法などについて解説します。Picturefillを使った実装やimgタグのsrcset属性を使った実装、またpictureタグを使った実装方法などを実際にコーディングしながら説明します。

1時間38分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年12月08日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。