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

picture要素のための画像の準備

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
picture要素によってレスポンシブイメージを実装するために必要な画像ファイルの準備について学びます。
講師:
02:32

字幕

このレッスンでは picture 要素によって レスポンシブイメージを実装する為に必要な 画像ファイルの準備について学びます ブラウザでのモックアップ作成に基づけば picture 要素で実現しようと しているレイアウトと おおまかな画像のサイズを 把握することができます では 画像の準備をしてみましょう 画像を用意してもレイアウトが変わると 再度リサイズする必要が出てくるので 予めレイアウトを決定しておくことが 重要になります デスクトップにサンプルファイルの フォルダをおいています このフォルダを開きます images フォルダの中には 予め画像が入っています images フォルダの中には 6つの画像があります 種類としては3つの異なる画像 elemonkey-square.jpg elemonkey-tall.jpg elemonkey-wide.jpg があります また それぞれに2つのバージョンが あることが分かります バージョンは等倍のスクリーンと 2倍の高密度スクリーン用に分かれており 2倍の方はファイル名の末尾に 2x と命名してあります 勿論 ファイル名は任意のものなので small ですとか medium large といった 名前にしても構いません しかし アートディレションにまつわる 作業をする場合は HTML 上でファイル名を見ただけで その画像がどういう画像か 分かるようにしておいた方が よりイメージしやすい筈です 画像は正方形 縦長 横長ですので ここでは square tall wide と名前をつけています 画像のサイズを確認しておきましょう elemonkey-square.jpg を開いて サイズを確かめてみましょう この elemonkey-square.jpg は 400 x 400 px であることが分かります もう1つの 2x の方のサイズは 当然2倍の 800 x 800 px です このレッスンでは picture 要素によって レシポンシブイメージを実装する為に必要な 画像ファイルの準備について学びました

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

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

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

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

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

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