試験公開中

このエントリーをはてなブックマークに追加

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

マイナビ出版

2,980円+税

いろいろなデバイスで快適に閲覧できるサイトを作成するための必須テクニックを集成!「モバイルガイド」「モバイルフレンドリーテスト」「PageSpeed Insights」を軸に、必要とされる知識やノウハウを解説していきます。

関連サイト

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

内容紹介

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

これまではマルチデバイスに対応するための明確な指標がなく、多くのページ制作者が試行錯誤を繰り返してきました。しかし、Googleが1つの指標として利用できる「モバイルガイド」をリリースし、状況は大きく変わろうとしています。

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

【本書のポイント】

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

書誌情報

  • 著者: エ・ビスコム・テック・ラボ
  • 発行日: (紙書籍版発行日: 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 3種類の方法を組み合わせて利用する
  • 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 ファイルを1つにまとめてHTTP リクエストを減らす
  • 6 レンダリングブロックを排除する
    • JavaScript を非同期で読み込む
    • CSS ファイルの遅延読み込みを指定しファーストビューのCSS をインライン化する
  • 7 コンテンツの優先順位を調整する
Home 書籍一覧 これからの「標準」を学ぶ マルチデバイス対応サイト構築 ▲ ページトップへ戻る