出版社内容情報
Googleの「モバイルガイド」という指標を軸に、マルチデバイス対応サイトの作成に必要な知識とノウハウ、テクニックを解説。
サイトのマルチデバイス対応に必要なノウハウとテクニックを集成！
スマートフォンやタブレットが普及し、PC以外からのWebサイト閲覧が増加しています。
さらに、Googleがモバイルデバイスに対応しているかどうかを検索結果のランキング要素にしたこともあり、サイトのマルチデバイス対応は必須となりつつあります。
これまではマルチデバイスに対応するための明確な指標がなく、多くのページ制作者が試行錯誤を繰り返してきました。
しかし、Googleが1つの指標として利用できる「モバイルガイド」をリリースし、状況は大きく変わろうとしています。
本書はGoogleの「モバイルガイド」と、ページの問題点を簡単にチェックできる2つの判定ツール「モバイルフレンドリーテスト」および「PageSpeed Insights」を軸にして、マルチデバイス対応に必要とされる知識、ノウハウ、テクニックなどを解説していきます。
【本書の内容】
Chapter 1 マルチデバイス対応の指標
Chapter 2 ビューポートの設定
Chapter 3 デバイスに合ったページの用意
Chapter 4 デバイスの判別
Chapter 5 パーツのマルチデバイス対応
Chapter 6 画像の最適化
Chapter 7 Webページの高速化
【本書のポイント】
・「モバイルガイド」と「モバイルフレンドリーテスト」「PageSpeed Insights」を元に、マルチデバイス対応の指標をつかめるようになる
・ビューポートの設定、デバイスの判別方法がわかる
・デバイスに合ったページの用意方法や、Webのパーツをマルチデバイス対応させる方法を習得できる
・画像の最適化のテクニックがわかる
・Webページの表示速度を上げるための改善ポイントがわかる
・本書で取り上げたサンプルはサポートサイトからダウンロード可能
Chapter 1 マルチデバイス対応の指標
1 マルチデバイスに対応したページを作成するときの指標
「スマホ対応」ラベル
2 マルチデバイス対応のために必要な設定
モバイルフレンドリーに関する項目
ビューポートの設定を行う
コンテンツの幅が画面の幅を超えないようにする
テキストが小さくなりすぎないようにする
リンク同士が近すぎないようにする
互換性のないプラグインを使用しないようにする
表示速度に関する項目
HTML/CSS/JavaScript を縮小する
圧縮を有効にする
画像を最適化する
ブラウザのキャッシュを活用する
表示可能コンテンツの優先順位を決定する
スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する
リンク先ページのリダイレクトを使用しない
サーバーの応答時間を短縮する
モバイルフレンドリーテスト
PageSpeed Insights
ページの表示にかかった時間を計測する
Chapter 2 ビューポートの設定
1 ビューポートの設定を行う
2 ビューポートの設定をしたときのページの表示範囲の大きさ
デバイスを横向きにしたときの表示
ページの拡大率の指定
ユーザーによる拡大表示の制限
ページの表示範囲の大きさを任意に指定する
Internet Explorer 用のビューポートの設定（１）
Internet Explorer 用のビューポートの設定（２）
iPhone 6 ／ iPhone 6 Plus の表示
ビューポートの設定に関する規格
Chapter 3 デバイスに合ったページの用意
1 デバイスに合ったページを用意する
セパレートURL（Separate URL）
動的配信（Dynamic Serving）
レスポンシブWeb デザイン（Reponsive Web Design）
2 セパレートURL でデバイスに合ったページを用意する
スマートフォンで使用するページ
タブレットで使用するページ
ページの関係を明示する
リダイレクトの設定
3 動的配信でデバイスに合ったページを配信する
ユーザーエージェントに応じて出力内容が変わることを伝える
WordPress による動的配信でデバイスに合ったページを配信する
モバイル用とPC 用のページの切り替えボタンを用意する
ブラウザに用意された機能でPC 用ページに切り替える
4 レスポンシブWeb デザインでデバイスに合ったデザインを用意する
メディアクエリを使ったCSS の記述
ブレークポイントの追加
デバイスの向きの検出
CSS フレームワークに標準で用意されているブレークポイント
Apple が導入したレスポンシブWeb デザイン
レスポンシブWeb デザインの誕生
5 ３種類の方法を組み合わせて利用する
6 さまざまなデバイスでの表示を確認する
デバイスの情報を任意に指定する
メディアクエリの設定を確認する
Chapter 4 デバイスの判別
1 デバイスの判別
デバイスの特性を判別する
デバイスの種類を判別する
ブラウザの対応機能を判別する
2 CSS のメディアクエリでデバイスの特性を判別する
CSS のメディアクエリをネストする
CSS のメディアクエリに関する規格
Internet Explorer 8 でCSS のメディアクエリに対応する
3 CSSOM のメディアクエリでデバイスの特性を判別する
古いブラウザでCSSOM のメディアクエリに対応する
CSSOM のメディアクエリに関する規格
4 メディアクエリで判別できる特性
ページの表示範囲の横幅・高さ
ページの表示範囲の縦横比
画面の向き
解像度（density）
主要ブラウザに対応する
ページズームしたときのdensity
CSS の単位に関する規格
走査方式
グリッドベースのデバイス
グリッドベースのデバイスでの表示
色
スクリーンの横幅・高さ
ブラウザごとの処理の違い
スクリーンの縦横比
CSS4 で提案されている特性
5 メディアクエリで判別できるメディアタイプ
メディアタイプの指定
非推奨とされたメディアタイプ
特性のみを指定した場合
古いブラウザに適用しないようにする場合
特性を否定する場合
6 JavaScript で特性の値を取得する
ページの表示範囲の横幅・高さ
スクリーンの横幅・高さ
iOS でステータスバーを除いた値を取得する
解像度（density）
画面の向き
画面の向きに関する規格
7 ユーザーエージェントでデバイスの種類を判別する
デバイスの種類を判別する方法
JavaScript で判別の処理を行う
PHP で判別の処理を行う
OS のバージョンを判別する
Android の標準ブラウザとChrome for Android のユーザーエージェント
ユーザーエージェントによる判別の問題
ブラウザの種類とレンダリングエンジン
8 ブラウザの対応機能を判別する
対応機能を判別する仕組み
Modernizr で対応機能を判別する
Modernizr のダウンロード
JavaScript で処理する場合
CSS で処理する場合
Modernizr で指定できるプロパティ
Non-core detects に用意された機能の判別
@support でCSS への対応状況を判別する
Chapter 5 パーツのマルチデバイス対応
1 パーツの作成
2 レイアウトの基本構造
レスポンシブWeb デザインの基本構造を作る
段組みのバリエーション
カラム落ちを利用した段組みのバリエーション
ボックスを左右に寄せた段組みのバリエーション
レスポンシブWeb デザインで３つの構造を切り替える
複数の段組みを組み合わせてページを構成する
画面サイズに合わせて段組みの左右に余白を入れる
段組みを構成する各ボックスの横幅を変える
固定レイアウトにする場合
CSS のグリッドシステムでレイアウトの基本構造を作る
3 テキスト
iOS におけるフォントサイズの自動拡大
フォントサイズを可変にする
iOS とAndroid に搭載されたフォントの種類
4 画像 で貼り込む場合
画像の拡大を禁止する
背景画像として貼り込む場合
背景画像を貼り込んだボックスの高さを切り替える
メディアクエリで小さい画面用のヘッダー画像に切り替える
HTML 側で背景画像を指定する
画像を固定サイズで貼り込む
画像を高解像度化する
5 ビデオ
ポスターフレーム画像の指定
ビデオに関する規格
ビデオのコーデック
YouTube のビデオを可変にする
6 タップターゲット
タップターゲットの問題箇所をチェックする
トグル型メニューを利用する
タップターゲットのハイライト表示をカスタマイズする
iOS のポップアップメニューを非表示にする
電話番号の自動リンクをオフにする
Chapter 6 画像の最適化
1 画像のクオリティを維持しつつデータ量を削減する
画像を最適化＆再圧縮する
レスポンシブイメージを利用する
SVG ／ Web フォント／アイコンフォントを利用する
CSS で作成したパーツをを利用する
2 画像を最適化＆再圧縮する
適切なフォーマットの選択
画像の最適化を行うツール
画像の最適化と再圧縮を行うツール
WordPress でアップロードした画像を自動的に最適化する
3 レスポンシブイメージを利用する
レスポンシブイメージを主要ブラウザで機能させる
固定サイズで貼り込んだ画像をレスポンシブイメージにする
image-set() に対応したブラウザ
可変サイズで貼り込んだ画像をレスポンシブイメージにする
ブラウザが選択する画像をカスタマイズする場合
可変にした背景画像をレスポンシブイメージにする場合
記事の横幅に合わせてブラウザが最適な画像を選択できるようにする
WordPress でレスポンシブイメージを利用する
Photoshop CC でレスポンシブイメージ用の画像を自動生成する
レスポンシブイメージに関する規格
PageSpeed Insights における画像サイズの判定
4 SVG を利用する
SVG の最適化
5 Web フォントやアイコンフォントを利用する
Google Fonts の利用
Font Awesome の利用
Web フォント／アイコンフォントのデータ量
Web フォントの仕組み
アイコンフォントの仕組み
必要なアイコンのみを含んだフォントデータを作成する
6 CSS で作成したパーツを利用する
３本線のアイコン
円形の影付きボタン
CSS のアイコンセットを利用する
CSS で作成したパーツの大きさを調整する
Chapter 7 Webページの高速化
1 Web ページの表示の仕組みと高速化
リソースの読み込み
リソースの読み込みで表示速度の改善が可能なポイント
Web ページのレンダリング
Web ページのレンダリングで表示速度の改善が可能なポイント
パフォーマンスの測定に関する規格
2 リソースのデータ量をミニファイ処理で削減する
ミニファイ処理を行うツール
3 HTTP 圧縮を利用する
4 ブラウザキャッシュを利用する
5 ファイルを１つにまとめてHTTP リクエストを減らす
CDN の利用で同時接続数の制限の壁を超える
高解像度なデバイスに対応したCSS スプライトの設定
CSS スプライトの画像を作成する
インライン化でHTTP リクエストを減らす
6 レンダリングブロックを排除する
JavaScript を非同期で読み込む
jQuery を非同期で扱ったときの問題
CSS ファイルの遅延読み込みを指定しファーストビューのCSS をインライン化する
Web フォントの設定をインライン化する
に関する規格
CSS を読み込むタイミングを変更する
画像の遅延読み込み
7 コンテンツの優先順位を調整する
ファーストビューの重要なコンテンツを先に読み込む
インライン化を見直す
各種リソースのデータ量を削減する
内容説明
マルチデバイスに対応したＷｅｂサイトを作るのに必要な情報、設定、ポイントをまとめて解説！図解とサンプルでよくわかる、これからの「標準」！ビューポート、メディアクエリ、レスポンシブＷｅｂデザインなど、これ１冊で必須項目が全部わかる！
目次
１ マルチデバイス対応の指標
２ ビューポートの設定
３ デバイスに合ったページの用意
４ デバイスの判別
５ パーツのマルチデバイス対応
６ 画像の最適化
７ Ｗｅｂページの高速化
