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

レスポンシブイメージを使ったアートディレクション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
picture要素を用いて、複数の画像を入れ替えることにより、画像のアートディレクションを実現する方法について、学びます。
講師:
05:16

字幕

このレッスンでは picture 要素を用いて 複数の画像を入れ替えることにより 画像のアートディレクションを 実現する方法について学びます picture 要素を使ってアートディレクションの 為にできることを考える時 いくつか気をつけなければならない 点があります 第1に picture 要素を使って 別々に表示するそれぞれの画像が 同じ情報を伝えられているかという点です 殆どの場合それぞれの画像に共通の メッセージを持たせる必要性があります 例えば 画像の一部分に拡大する といったケースが考えられます この場合画像の中に 見せたいものがあるという意味で 画像が変わったとしても メッセージは変更されていません 単に見た目の為だけに 画像を入れ替える場合でも メッセージは変わらないように 注意する必要があります 次に 全てのユーザーに最適な体験を 提供する画像を使っているかどうかを 検討する必要があります picture 要素を使って 複数の画像を追加したとしても 実際にユーザーが目にするのは そのうちの一つだけです その為それぞれの画像が その画像だけを見た時に ユーザーに最適な体験が提供できて いるかどうかを考えなければなりません 最後に アクセシビリティについてです 画像には常に alt 属性によって 代替テキストを用意する必要があります picture 要素を使う時常にその中には img 要素が含まれます そして img 要素の中には常に alt 属性が含まれます その為 画像が表示されなくても 意味が伝わるよう alt 属性に代替テキストを準備して おくことが重要になります ここでサンプルファイルを基に 最も一般的に使われている picture 要素の例を紹介します 画面ではブラウザでサンプルファイルの HTML を開いているところです HTML の中には画像が表示されています 画像には桜が写っており よく見るとこの真ん中の部分には 小さな蜂がいます そして写真のキャプションとして 「蜜を吸う蜂」と書いてあります しかし 現在表示しているように 小さいデバイスで見ると 蜂が非常に小さくて見にくくないでしょうか 逆にビューポートが大きい場合は 蜂を確認するのは簡単になります ここでこの画像でユーザーに伝えたい メッセージを考えてみましょう 勿論画像の中に蜂が見えていないと だめですよね そしてその為には解像度や画像サイズを 変更しても意味がありません そこで picture タグの出番です 同じ HTML をエディターで開きます サンプルファイルの中には 画像の真ん中に蜂がいることが分かるように 画角を変えてトリミングしている 3つの画像を予め用意しています images フォルダの中にある large.jpg medium.jpg small.jpg です そして HTML の中にも 予め picture タグ src タグ そして img タグを含んだコードを予め 用意してコメントアウトしています このコメントアウトを外して 元々あった画像のコードを削除し HTML を保存して 再度ブラウザで確認してみましょう 再読み込みを行います ビューポートの大きさを変更してみましょう 大きい表示の場合は 先程と変わりがありません 勿論画像の中に蜂が確認できます では ビューポートを小さくしていきましょう すると特定のポイントで 画像が入れ替わったことが分かります そして 小さな画像でも蜂がいることが はっきりわかるようになりました 更に ビューポイントを縮めて行きましょう 更に画像は入れ替わりました 先程は何だか分からなかった蜂が よりはっきりと見えます これが picture 要素の典型的な使用例です 画像を入れ替えることによって 画像の中の重要なもの・メッセージを もつものを明確にしています どの画像をみても蜂が蜜を吸っている ということが分かる筈です このレッスンでは picture 要素を用いて 複数の画像を入れ替えることにより 画像のアートディレクションを実現する 方法について学びました

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

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

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

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

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

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