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

Picturefillを読み込む

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

ぜひご覧ください。

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

字幕

このレッスンでは picture 要素の ポリフィルである Picturefill を読み込むための 手順について学びます レスポンシブイメージの マークアップを進める前に ブラウザがそれを正常に表示できるかどうかを まず確認しておく必要があります ここでは Picturefill という ポリフィルをプロジェクトに 追加することによって レスポンシブイメージに対する サポートを得ることにしましょう さてプロジェクトとは何でしょうか このレッスンでは予め サンプルファイルが用意されています 現在デスクトップには サンプルファイルを フォルダ内に収めて置いてあります このサンプルファイルを元に 解説を進めていきます フォルダの中には マークアップ済みの index.html シンプルなスタイルを定義した style.css 更に5枚の画像が含まれている images というフォルダがあります images フォルダの中には 2600 px の幅を持つオリジナルの画像と それを縮小した 小さな画像 中くらいの画像 大きな画像 特大の画像があります これらの4つの縮小された画像を開くと 画像の左上に 実際のサイズが 書かれていることがわかります この小さな画像は 600 × 400 px です これからブラウザのサイズ変更に応じて 表示される画像が変わるように レスポンシブイメージのための コードを実装していきます コードエディタを開きます ここではコードエディタとして Brackets を使っていますが もちろん好きなコードエディタを 使っていただいて構いません 現在は先程デスクトップに置いてあった サンプルファイルのフォルダを Brackets で開いている所です 画面左側のサイドバーで フォルダ内に含まれている すべてのファイルを見ることができます html は html5 で書かれています その中には img タグが含まれている figure タグがあり その画像の中に src 属性と alt 属性があります 画像を表示するための 標準的な方法ですよね これは固定サイズの画像となり すべてのブラウザで同じ画像が表示されます ここで実現したいのは ブラウザウィンドウのサイズに応じて 異なる画像が読み込まれるように レスポンシブイメージのコードを 書くことです それを多くのブラウザで動作させるため Picturefill を追加する必要があります Picturefill の追加は非常に簡単です まず Picturefill のウェブサイト scottjehl.github.io/picturefill/ にアクセスします ここでは VERSION 3.0.1 のために 2つのオプションがあります 開発版である picturefill.js は 圧縮されておらず 人間が読めるコードになっています もう1つは本番用の picturefill.min.js で こちらは圧縮されており 人間が読むことは困難です しかし実際にはブラウザが 実行するだけのファイルですので 通常はこちらを選ぶと良いでしょう リンクをクリックすると コード本体が表示されますので Windows であれば Ctrl+S Mac であれば command+S を押して ファイルを任意の位置に保存します ここではサンプルファイルのフォルダの 置いてあるフォルダの中に js という名前のフォルダを作成し この js フォルダの中に picturefill.min.js を保存します エディタに戻ります 先程のサイドバーを見ると js フォルダと その中に picturefill.min.js が 追加されていることがわかります このファイルを開いてみましょう 先程ファイルが圧縮されている と話しましたが これがその内容です コードは一行に纏められており 人間が読むには適していませんが ファイルサイズが小さくなる分 ブラウザが読み込むことには適しています ブラウザに戻り ダウンロードした箇所より 少し下にスクロールしてみましょう ここに2つのコードサンプルがあります 1つ目は picturefill を 単に呼びだすスクリプトです もう1つはブラウザが picture 要素をサポートしていない場合 それを動的に追加するスクリプトです ほとんどの場合2つ目のスクリプトを 用いることになるでしょう 選択してコピーしておきます 右クリックから「コピー」を選びます このスクリプトは head タグの中に配置する というふうになっています エディタに戻り html を開いて head タグの中に先程コピーした スクリプトタグを貼り付けていきます 「編集」メニューから 「ペースト」します コードの中身を見ていきましょう 最初は picture 要素を この html に定義するスクリプトタグです ブラウザが picture 要素を サポートしていないのであれば それが追加されます その後 もう1つのスクリプトタグでは Picturefill を非同期に 読み込んでいます コピーしてきたコードに 1つだけ変更を加える必要があります 読み込むファイルのパスです js ファイルは js フォルダの 中にありますので このファイル名の頭に js/ と入力し 更に本番用のファイルを使うため picturefill.min.js と名前を書き換えます これで Picturefill を読み込み 利用する準備ができました このレッスンでは picture 要素の ポリフィルである Picturefill を読み込むための 手順について学びました

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

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

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

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

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

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