これからの「標準」を学ぶマルチデバイス対応サイト構築
SAMPLE 基本サンプル
Chapter 4 デバイスの判別
2 CSSのメディアクエリでデバイスの特性を判別する
3 CSSOM のメディアクエリでデバイスの特性を判別する
4 メディアクエリで判別できる特性
5 メディアクエリで判別できるメディアタイプ
6 JavaScript で特性の値を取得する
7 ユーザーエージェントでデバイスの種類を判別する
8 ブラウザの対応機能を判別する
Chapter 5 パーツのマルチデバイス対応
2 レイアウトの基本構造
3 テキスト
4 画像
5 ビデオ
6 タップターゲット
Chapter 6 画像の最適化
2 画像を最適化＆再圧縮する
3 レスポンシブイメージを利用する
4 SVGを利用する
5 Webフォントやアイコンフォントを利用する
6 CSSで作成したパーツを利用する
Chapter 7 Webページの高速化
※表示速度のテストに使用したサンプルをオンラインで公開しています。
※実際のテスト結果を確認する場合、「オンラインサンプルをPageSpeed Insightsでテストする」をクリックしてください。
※ネットワークの状況や時間帯によって結果に違いが出る場合があります。
※画面キャプチャは2015年3月現在の判定結果です。
※実際のテスト結果を確認する場合、「オンラインサンプルをPageSpeed Insightsでテストする」をクリックしてください。
※ネットワークの状況や時間帯によって結果に違いが出る場合があります。
※画面キャプチャは2015年3月現在の判定結果です。
-
高速化なし
-
高速化
Chapter 6の 2＋Chapter 7の 2 3 4 を実行
-
高速化
Chapter 6の 2＋Chapter 7の 2 3 4 6 を実行