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

sizesとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ビューポートに関連して、異なる画面サイズや異なるレイアウトに対して、画像がどのように表示されるのかを決める、sizes属性について学びます。
講師:
05:03

字幕

このレッスンではビューポートに関連して 異なる画面サイズや異なるレイアウトに対して 画像がどのように表示されるのかを 決める sizes 属性について学びます srcset 属性と w 記述子を使うことで レシポンシブイメージの実装を 行うことが出来ます w 記述子はビューポートの幅に合わせて 最適な画像を選択し表示する 機能を持っています 現在はサンプルファイルを Firefox の レシポンシブモードで開いている所です ビューポートの幅を変更すると 大きいビューポートには大きい画像が 小さいビューポートには小さい画像が 表示されていることが分かります 最終的に画像は CSS によって 一定の大きさより大きく 表示されることはありませんが 画像自体はビューポートの幅に合わせて 1200px または 1600px のものが読み込み表示されています つまり現状では 実際に表示に必要なサイズよりも 大きい画像を読み込んでいることになります 本来は ビューポートの幅ではなく 画像が表示される実際のスペースの幅に 基づいて画像が選択されると より良い実装と言えそうです これを解決する為には sizes 属性を使います 具体的な話を進める前に 思い出しておくべき事があります Web 標準のムーブメントの中核は HTML でマークアップした要素は 何を意味しているのかという点が重要である ということです 見た目はスタイルについては CSS で書くべきものであり 通常 HTML とは切り離して考えます しかし レシポンシブイメージも sizes 属性でマークアップする際 HTML の中にある程度見た目に 関係する技術を含める必要があります sizes 属性は全体的なレイアウトとの関係で 画像をどういう幅で表示するかと いうことを設定できます 次のサンプルで説明しましょう 3つの異なる画面のレイアウトが あるとします 最も広いスクリーンでは 1600px の画面上に 1200px の画像は表示されます 800px のスクリーンでは 760px の画像が 480px のスクリーンでは 480px の画像が表示されます sizes 属性ではこれらの画像が ビューポートに関連して 異なる画面サイズや異なるレイアウトに対して どのように表示されるのかを 決めることができます 具体的には メディア クエリ メディア条件を指定することで実現できます 最も小さい画面 モバイルのスクリーンの為には 100vw という値を設定します vw とはビューポートの幅の単位で 1 vw はビューポートの幅の 100 分の一を示します つまり 100vw ではビューポートの幅 つまりブラウザ全体の幅と同じになります 次にタブレットの為には 幅が 600px よりも大きい場合という― メディア クエリを設定した上で 900vw の幅で画像を 表示するように設定します そして 大きいスクリーンの為に 幅が 1200px 以上の場合 1200px で画像を表示するように指定します このようにメディア クエリによって ビューポートのサイズによって画像を どのようなサイズで表示するかを 指定するのが sizes 属性です ブラウザは w 記述子の値と合わせて sizes 属性の値を参照します sizes 属性のマークアップは メディア クエリに続いて CSS 上のピクセルサイズを指定します 複数ある場合は srcset 属性と同じように カンマで区切ります カンマで区切れば 値は複数持つことができます 但し リストの最後には 必ずメディア クエリなしの値を 設定しておきます ここでは 100vw を設定しています これはどのような条件にも 適合しなかった場合 デフォルトとして使われる値になります つまりこのサンプルではビューポートと 同じ幅になるということになります このレッスンではビューポートに関連して 異なる画面サイズや異なるレイアウトに対して 画像がどのように表示されるのかを決める sizes 属性について学びました

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

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

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

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

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

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