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

ブレークポイントの定義と動的なレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
picture要素を使った画像の入れ替えにおいて、動的なレイアウトを実現するためのブレークポイントの定義について学びます。
講師:
02:12

字幕

このレッスンでは picture 要素を使った 画像の入れ替えにおいて 動的なレイアウトを実現するための ブレイクポイントの定義について学びます picture 要素を使って ウェブサイトを設計することは サイトの中のコンテンツを どうやってデザインするかを 再考する必要があることを意味します 通常ウェブページに画像を追加する時 ここに画像を表示しよう とか こういうサイズで画像を収めよう などといったことを考えるはずです これに対して picture 要素を使う時は スクリーンサイズに応じて 画像ファイル自体を入れ替えることが出来ます つまり これがレイアウトを再考したり 正確に意味を伝えるために 画像の内容を考えたり といったことに繋がります このプロセスはブラウザでの アートディレクション デザイン 設計 と言えるでしょう ブラウザ上で作業することによって 異なるタイプのレイアウトの モックアップを簡単に作ることができます このサンプルでは小さいスクリーンでは 正方形の画像を表示しています そして真ん中のスクリーンでは 縦長の画像を 一番左の大きいスクリーンでは 横長の画像を表示しています これらのすべての 3つのフォーマットに合わせて 画像の最大の幅が幾つであるかを 知る必要があります ここではそれぞれ 325px 760px 880px としましょう それからこれらのサイズの画像に 切り替えるための ブレイクポイントをどこに設けるかを 決めなければなりません これらのブレイクポイントは CSS と picture タグの中のコードの 両方に追加する必要があります このレッスンでは picture 要素を使った 画像の入れ替えにおいて 動的なレイアウトを実現するための ブレイクポイントの定義について学びました

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

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

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

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

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

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