書店員向け情報 HELP
出版者情報
これからの「標準」を学ぶ マルチデバイス対応サイト構築
- 書店発売日
- 2015年4月23日
- 登録日
- 2015年8月13日
- 最終更新日
- 2015年8月13日
紹介
サイトのマルチデバイス対応に必要なノウハウとテクニックを集成!
スマートフォンやタブレットが普及し、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 用のビューポートの設定(1)
Internet Explorer 用のビューポートの設定(2)
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 3種類の方法を組み合わせて利用する
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 デザインで3つの構造を切り替える
複数の段組みを組み合わせてページを構成する
画面サイズに合わせて段組みの左右に余白を入れる
段組みを構成する各ボックスの横幅を変える
固定レイアウトにする場合
CSS のグリッドシステムでレイアウトの基本構造を作る
3 テキスト
iOS におけるフォントサイズの自動拡大
フォントサイズを可変にする
iOS とAndroid に搭載されたフォントの種類
4 画像
で貼り込む場合
画像の拡大を禁止する
上記内容は本書刊行時のものです。