これからの「標準」を学ぶ マルチデバイス対応サイト構築

関連サイト

本書の関連ページが用意されています。

• これからの「標準」を学ぶ マルチデバイス対応サイト構築｜マイナビブックス

内容紹介

スマートフォンやタブレットが普及し、PC以外からのWebサイト閲覧が増加しています。さらに、Googleがモバイルデバイスに対応しているかどうかを検索結果のランキング要素にしたこともあり、サイトのマルチデバイス対応は必須となりつつあります。

本書はGoogleの「モバイルガイド」と、ページの問題点を簡単にチェックできる２つの判定ツール「モバイルフレンドリーテスト」および「PageSpeed Insights」を軸にして、マルチデバイス対応に必要とされる知識、ノウハウ、テクニックなどを解説していきます。

【本書のポイント】

• 「モバイルガイド」と「モバイルフレンドリーテスト」「PageSpeed Insights」を元に、マルチデバイス対応の指標をつかめるようになる
• ビューポートの設定、デバイスの判別方法がわかる
• デバイスに合ったページの用意方法や、Webのパーツをマルチデバイス対応させる方法を習得できる
• 画像の最適化のテクニックがわかる
• Webページの表示速度を上げるための改善ポイントがわかる
• 本書で取り上げたサンプルはサポートサイトからダウンロード可能

書誌情報

• 著者: エ・ビスコム・テック・ラボ
• 発行日: 2015-04-22 (紙書籍版発行日: 2015-04-22)
• 最終更新日: 2015-04-22
• バージョン: 1.0.0
• ページ数: 322ページ(PDF版換算)
• 対応フォーマット: PDF
• 出版社: マイナビ出版

対象読者

著者について

エ・ビスコム・テック・ラボ

さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、CD-ROM、デジタル映像、CG、ソフトウェアの企画制作、WWWシステムの構築などを行う。
主な編著書： 『これからの「標準」を身につける　HTML+CSSデザインレシピ』（マイナビ）、『HTML5　スタンダード・デザインガイド』（同）、『CSS3　スタンダード・デザインガイド【改訂第2版】』（同）、『スマートフォンサイトのためのHTML5+CSS3』（同）、『XHTML/HTML+CSS　スーパーレシピブック』（同）、『WordPress3　サイト構築スタイルブック』（同）、『WordPress3　デザイン＆カスタマイズ　スタイルブック』（同）、『Movable Type　サイトデザイン＆レシピ事典』（同）、『WordPress ステップアップブック』（ソシム）、『HTML5&CSS3レッスンブック』（同）、『Dreamweaver+HTML5&CSS3レッスンブック』（同）、『HTML5 & CSS3ステップアップブック』（同）、『WordPressデザインブック3.x対応』（同）、『HTML/XHTML&スタイルシート レッスンブック』（同）、『HTML/XHTML&スタイルシート デザインブック』（同）

目次

Chapter 1　マルチデバイス対応の指標

• 1 マルチデバイスに対応したページを作成するときの指標
• 2 マルチデバイス対応のために必要な設定
  • モバイルフレンドリーに関する項目
  • 表示速度に関する項目

Chapter 2　ビューポートの設定

• 1 ビューポートの設定を行う
• 2 ビューポートの設定をしたときのページの表示範囲の大きさ

Chapter 3　デバイスに合ったページの用意

• 1 デバイスに合ったページを用意する
• 2 セパレートURL でデバイスに合ったページを用意する
  • スマートフォンで使用するページ
  • タブレットで使用するページ
• 3 動的配信でデバイスに合ったページを配信する
• 4 レスポンシブWeb デザインでデバイスに合ったデザインを用意する
  • メディアクエリを使ったCSS の記述
  • ブレークポイントの追加
• 5 ３種類の方法を組み合わせて利用する
• 6 さまざまなデバイスでの表示を確認する
  • デバイスの情報を任意に指定する
  • メディアクエリの設定を確認する

Chapter 4　デバイスの判別

• 1 デバイスの判別
  • デバイスの特性を判別する
  • デバイスの種類を判別する
  • ブラウザの対応機能を判別する
• 2 CSS のメディアクエリでデバイスの特性を判別する
• 3 CSSOM のメディアクエリでデバイスの特性を判別する
• 4 メディアクエリで判別できる特性
  • ページの表示範囲の横幅・高さ
  • ページの表示範囲の縦横比
  • 画面の向き
  • 解像度（density）
  • 走査方式
  • グリッドベースのデバイス
  • 色
  • スクリーンの横幅・高さ
  • スクリーンの縦横比
• 5 メディアクエリで判別できるメディアタイプ
  • メディアタイプの指定
• 6 JavaScript で特性の値を取得する
  • ページの表示範囲の横幅・高さ
  • スクリーンの横幅・高さ
  • 解像度（density）
  • 画面の向き
• 7 ユーザーエージェントでデバイスの種類を判別する
  • デバイスの種類を判別する方法
  • JavaScript で判別の処理を行う
  • PHP で判別の処理を行う
• 8 ブラウザの対応機能を判別する
  • 対応機能を判別する仕組み
  • Modernizr で対応機能を判別する

Chapter 5　パーツのマルチデバイス対応

• 1 パーツの作成
• 2 レイアウトの基本構造
• 3 テキスト
• 4 画像
  • <img> で貼り込む場合
  • 背景画像として貼り込む場合
• 5 ビデオ
• 6 タップターゲット

Chapter 6　画像の最適化

• 1 画像のクオリティを維持しつつデータ量を削減する
• 2 画像を最適化＆再圧縮する
• 3 レスポンシブイメージを利用する
  • 固定サイズで貼り込んだ画像をレスポンシブイメージにする
  • 可変サイズで貼り込んだ画像をレスポンシブイメージにする
• 4 SVG を利用する
• 5 Web フォントやアイコンフォントを利用する
• 6 CSS で作成したパーツを利用する

Chapter 7　Webページの高速化

• 1 Web ページの表示の仕組みと高速化
  • リソースの読み込み
  • Web ページのレンダリング
• 2 リソースのデータ量をミニファイ処理で削減する
• 3 HTTP 圧縮を利用する
• 4 ブラウザキャッシュを利用する
• 5 ファイルを１つにまとめてHTTP リクエストを減らす
• 6 レンダリングブロックを排除する
  • JavaScript を非同期で読み込む
  • CSS ファイルの遅延読み込みを指定しファーストビューのCSS をインライン化する
• 7 コンテンツの優先順位を調整する