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

Picturefillとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
レスポンシブイメージのための仕様がサポートされていないブラウザでも、それらが動作するようになるライブラリ、Picturefillの登場の背景と、概要について学びます。
講師:
04:43

字幕

このレッスンでは レスポンシブイメージのための 仕様がサポートされていないブラウザでも それらが動作するようになるライブラリ Picturefill の登場の背景と 概要について学びます 2010 年ごろからの レスポンシブウェブデザインの導入により ウェブページに対してレスポンシブに 画像を追加する 良いソリューションが必要とされ始めました その必要性の高まりに反して 現実的に用いることのできる良い手法は あまりありませんでした 様々なサイトやブラウザで 同一的に使える仕様の登場には 2014 年の夏ごろまで 待つことになります 現在ではレスポンシブイメージに関する コミュニティグループ「 RICG 」のおかげで レスポンシブイメージの手法が 確立されつつあります しかし1つ注意しておきましょう レスポンシブイメージの仕様は 非常に新しい仕様のため ブラウザによるサポートはまちまちです ブラウザの互換性をチェックできるサイト caniuse.com に行き srcset 属性について検索してみましょう このページ上部の 「Can I use」という検索ボックスの中に 使いたい機能を入力します すると その下に その使いたい機能が どのブラウザでサポートされているか ということを表示してくれます この srcset 属性 新しい属性をサポートしているブラウザは Firefox Chrome Safari Opera またモバイル用のブラウザでは iOS 用の Safari Android5 以上のウェブビュー Android 用の Chrome です Opera Mini や IE の 現在のバージョンではサポートされていません なお Edge では限定的なサポートがあります このサポート状況は このビデオの収録時点のものであり 日々状況は変動しています srcset 属性の代わりに picture 要素で検索をしてみましょう 先程と変わって状況は更に悪くなります picture 要素をサポートするブラウザは Firefox Chrome Opera Android5 以上のウェブビュー Android 用の Chrome です その他のブラウザについては サポートをしていません 今日レスポンシブイメージを使うにあたって このブラウザのサポート状況が最大の問題です 仕様が存在していたとしても すべてのエンドユーザーが レスポンシブイメージの体験を 得ることが出来るわけではありません そこでポリフィルと呼ばれるものを 追加することで これらをサポートしていないブラウザにも 同じ体験を提供することができます ポリフィルは高度な html と css を ブラウザメーカーがサポートする前に 利用するためにとられる手法の一種です ポリフィルは通常 Java Script で書かれており html や css で期待される機能を 再現するために その機能を動的に追加します 先程 caniuse.com で見たように サポートされていない穴を 埋めることが出来る訳です レスポンシブイメージについては Picturefill と呼ばれるポリフィルがあります Picturefill を使うことにより ウェブ標準に基づいた レスポンシブイメージのための コードを書くことができ ほとんどのブラウザで 動作させることができます つまりブラウザがレスポンシブイメージの ための仕様をサポートしていない場合でも Picturefill を使うことで それらを使うことができるのです 英語にはなりますが 現在表示している Picturefill のウェブサイトを訪れ 是非ドキュメントを読んでみて下さい プロジェクトの背景にある情報や ベストプラクティスの 実装サンプルが紹介されています このレッスンでは レスポンシブイメージのための 仕様がサポートされていないブラウザでも それらが動作するようになるライブラリ Picturefill の登場の背景と 概要について学びました

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

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

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

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

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

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