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

srcsetとsizesを使った高度なレイアウト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
srcset属性とsizes属性を使った、複雑な条件が組み合わさったときのレイアウトについて学びます。
講師:
07:25

字幕

このレッスンでは srcset 属性と sizes 属性を使った― 複雑な条件が組み合わさった時の レイアウトについて学びます レスポンシブイメージを扱うとき HTML と CSS の両方でどのような ブレイクポイントがあるかに 注意を払う必要があります HTML の中に見た目に関わるコードを 含めなければならないこの点は 多くの議論を呼んでいる点でもあります 具体的なサンプルを確認してみましょう HTML にはいくつか同じ画像が 表示されています スクロールすると4つ同じ画像が 並んでいることが分かります これらは div タグでラッピングされ クラスを割り当てられ CSS でフレックスボックスとして レイアウトされています ビューポートが特定の幅に達すると 一行に二列のレイアウトに もう少し広い幅に達すると 一行に三列のレイアウトになります ビューポートの幅が 600px を超えると 大きい画像ファイルに切り替わっていますが 実際の表示領域はとても小さい為 これを修正してみましょう エディターに切り替え この HTML を開きます HTML の中には gallery をクラスに持つ― div タグ内に 同じ figure タグが4つ 繰り返されています これらの figure タグは中身は全く同じで 同じような sizes 属性を持っています 続いて CSS を確認してみましょう grid-style.css を開くと フレックスボックスを使って レイアウトされてることが分かります スクリーンが 30em 以上になると gallery の display プロパティが flex になります flex-wrap プロパティは wrap に指定されています これは他のアイテムの下に潜り込む という指定になります 更に justfy-content プロパティは space-between つまり一番左の要素は左端に 一番右の要素は右端に その他の要素は中央に 自動的にレイアウトされるように 指定しています これに加えて featured-image クラスに対して 50% -1em という幅を設定しています これによって画像が横に並んだ時に 間に 1em 分のパディングを 設ける事ができています シンプルなマークアップですが フレックスボックスは新しい仕様の為 全てのブラウザで動作しない可能性があります レシポンシブイメージの話題に戻りましょう CSS では2つのブレイクポイント min-width 30em と min-width 40em が指定されています このサイズに画像のサイズが収まるように マークアップしていきましょう CSS の値を利用するため メディア クエリの部分をコピーします コピーのショートカットキーは Windows なら Ctrl+C Mac なら command+C です この部分をコピーして HTML に移動し 最初の画像を捜します この部分が最初の画像ですね sizes 属性の中のメディア クエリを 先程コピーしたものに差し替えます ペーストのショートカットキーは Windows なら Ctrl+V Mac なら command+V です 先程コピーした値に差し替えました 続いて 表示するサイズを指定します CSS に戻り サイズを確認しましょう ここで指定しているのは固定のサイズではなく 動的に計算されるサイズです これをコピーしましょう 同じように 選択してコピーします HTML に戻り 値の部分にペーストします しかし CSS と違ってここでは %をベースとした計算を行うことができません その為 この単位の部分を vw に変更しておきます 表示される幅はビューポートの幅の 50% -1em ということになります これが1つ目の値で カンマで区切ることで2つ目の値を指定します CSS に戻り メディア クエリをコピーし HTML に貼り付けます そして 同じように値についても CSS からコピー......したい所なのですが 実際の表示を確認すると 一行に3列のレイアウトになる時 画像の表示サイズは殆ど 変わっていないことが分かります そこで Firefox の「要素を調査」を使って 最大サイズを調べましょう 右クリックから「要素を調査」 そしてこの該当の画像を調べます 画像の幅は 243.35px と表示されています 切りの良い所で 250px で 指定しておきましょう エディターに戻り サイズの部分に今度は 固定サイズとして250px を指定します そして コードを少し整えます ここまでの変更は 最初の画像にのみ適用されています 保存して ブラウザに戻って 開発ツールを閉じ リロードしてみましょう 1つ目の画像の左上を見ると このように小さい画像のままに なっていることが分かります ビューポートの幅を小さくしても 広げても1枚目の画像だけは 小さい画像のままです 他の画像は中位の画像が 表示されてしまっています エディターに戻って 完成したこの sizes 属性の指定を 他の画像にも適用しましょう コピー&ペーストで適用して行きます 2つ目の画像 そして3つ目の画像 4つ目の画像と全てに同じ sizes 属性を指定します このように HTML の中に CSS と同じような見た目に関わる コードが入りますので CSS に変更が発生した場合は HTML にも変更を加える必要が出てきます このレッスンでは srcset 属性と sizes 属性を使った― 複雑な条件が組み合わさった時の レイアウトについて学びました

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

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

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

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

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

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