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

画像ファイル形式のフォールバックとしてpicture要素を利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像ファイル形式のフォールバックとしてpicture要素を利用する方法について、学びます。
講師:
05:30

字幕

このレッスンでは画像ファイル形式の フォールバックとして picture 要素を利用する方法について学びます ウェブ上では新しい画像フォーマットが 注目を集めています 問題は古いブラウザでは これらの新しい画像フォーマットを サポートしていないということです 例えば現在 Illustrator で 開いている SVG スケーラブルベクターグラフィックスのような フォーマットです あるいは BMP という透過が可能で jpeg より軽いフォーマットもあります これらの新しい画像フォーマットの難しい所は ブラウザがそれらをサポートしていない場合 ユーザは何も得ることが できないということです つまりこれらのフォーマットを 使いたいのであれば フォールバックを提供する必要があります このような場合フォールバックは 複雑な JavaScript を伴ったり 動作が重かったりすることが 多くあります このような問題を解決するために picture 要素を使うことができます これがプログレッシブエンハンスメント としての picture 要素の役割です 例えばこの SVG や BMP の代わりに JPEG PING GIF といった標準的な フォーマットを 提供することができます これにより古いブラウザのサポートが 不完全でも SVG のような新しい画像フォーマットを 使うことができます ここで簡単なサンプルを見てみましょう Illustrator で空を飛んでいるスパーヒーローの ベクターグラッフィクスを作成したとします これをウェブ上に掲載する時 このように任意のサイズに変形しても 美しく表示できるようにベクターのままで 表示したいことがあるでしょう そこで SVG としてこれを保存してみます 問題は SVG をすべてのブラウザが サポートしているわけではないということです そのためここでは予め SVG と PING の 2種類のファイルを書き出しています エディタに切り替えて サンプルファイルに含まれる HTML を開いています images フォルダの中には 先ほど申し上げた hero.ping と hero.svg が あります 現在 HTML の中では hero.ping だけが 表示されています これをブラウザで確認してみましょう 画面の真ん中に ping 画像が 一枚表示されています ping ですから 当然ブラウザのズームを行なった場合 ズームはキーボードの cntl キー Macでは command を押しながら マウスホイールを上の方に動かします すると PING のエッジに ジャギが目立つようになります SVG を使うとこのようなサイズの変形にも 対応でき かつ色を変更したりアニメーションしたり と言ったことが可能になります picture 要素を使った実装してみましょう エディタに戻り まず img 要素を picture 要素で ラッピングします イメージをその周りを picture 要素でこのようにラッピングします そしてこの picture 要素の内側に src 要素を追加します src 要素です そしてここでタイプ属性を使います タイプ属性は指定されたファイルの種類を ブラウザに伝えることができます ここではファイルの種類を img/svg + xml と指定します そして srcset 属性の値として images フォルダの中にある hero.svg を指定し 閉じタグを入力します このような指定をすることで 画像フィイル形式の フォールバックが行なえます ブラウザはまず src 要素の中身を見て コンテンツの種類を尋ねます タイプ属性で種類を指定していますので それを理解できるブラウザであれば そのまま SVG を表示します 一方 SVG を理解できない つまりサポートしていないブラウザもあります その場合は src タグではなく その下にある img タグがフォールバックとして 使われます 保存しブラウザで確認をしてみましょう ブラウザで再読み込みを行ないます 現在使っているブラウザは Firefox で Firefox は SVG をサポートしています そのため現在表示されているのは 先ほどの PING と違って SVG です ズームをしてみましょう ズームしても先ほどと違って エッジに先ほどのようなジャギは見えず スムーズな線が表示されています このレッスンでは画像ファイル形式の フォールバックとして picture 要素を利用する方法について学びました

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

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

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

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

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

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