これからの「標準」を学ぶマルチデバイス対応サイト構築(Web Designing BOOKS) [単行本]

これからの「標準」を学ぶマルチデバイス対応サイト構築(Web Designing BOOKS) の 商品概要

• 要旨（「BOOK」データベースより）

  マルチデバイスに対応したＷｅｂサイトを作るのに必要な情報、設定、ポイントをまとめて解説！図解とサンプルでよくわかる、これからの「標準」！ビューポート、メディアクエリ、レスポンシブＷｅｂデザインなど、これ１冊で必須項目が全部わかる！

• 目次

  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 に未対応のブラウザに代替画像を表示する
  　　　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 コンテンツの優先順位を調整する
  　　　ファーストビューの重要なコンテンツを先に読み込む
  　　　インライン化を見直す
  　　　各種リソースのデータ量を削減する

• 出版社からのコメント

  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ページの表示速度を上げるための改善ポイントがわかる
  ・本書で取り上げたサンプルはサポートサイトからダウンロード可能

これからの「標準」を学ぶマルチデバイス対応サイト構築(Web Designing BOOKS) の商品スペック