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

マナティ

購入形態

PDF
3,278円
数量:

カートに追加されました。カートを見る

カートに入れる
紙の本を買う

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

マイナビ出版

いろいろなデバイスで快適に閲覧できるサイトを作成するための必須テクニックを集成!

サイトのマルチデバイス対応に必要なノウハウとテクニックを集成!

スマートフォンやタブレットが普及し、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ページの表示速度を上げるための改善ポイントがわかる
・本書で取り上げたサンプルはサポートサイトからダウンロード可能

発売日:2015-04-23

ページ数:320ページ

目次

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 画像
<img> で貼り込む場合
 画像の拡大を禁止する
 <picture> で小さい画面用のヘッダー画像に切り替える
背景画像として貼り込む場合
 背景画像を貼り込んだボックスの高さを切り替える
 メディアクエリで小さい画面用のヘッダー画像に切り替える
 HTML 側で背景画像を指定する
 画像を固定サイズで貼り込む
 画像を高解像度化する
5 ビデオ
 ポスターフレーム画像の指定
 ビデオに関する規格
 ビデオのコーデック
 YouTube のビデオを可変にする
6 タップターゲット
 タップターゲットの問題箇所をチェックする
 トグル型メニューを利用する
 タップターゲットのハイライト表示をカスタマイズする
 iOS のポップアップメニューを非表示にする
 電話番号の自動リンクをオフにする

Chapter 6 画像の最適化
1 画像のクオリティを維持しつつデータ量を削減する
 画像を最適化&再圧縮する
 レスポンシブイメージを利用する
 SVG / Web フォント/アイコンフォントを利用する
 CSS で作成したパーツをを利用する
2 画像を最適化&再圧縮する
 適切なフォーマットの選択
 画像の最適化を行うツール
 画像の最適化と再圧縮を行うツール
 WordPress でアップロードした画像を自動的に最適化する
3 レスポンシブイメージを利用する
 レスポンシブイメージを主要ブラウザで機能させる
固定サイズで貼り込んだ画像をレスポンシブイメージにする
 image-set() に対応したブラウザ
可変サイズで貼り込んだ画像をレスポンシブイメージにする
 ブラウザが選択する画像をカスタマイズする場合
 可変にした背景画像をレスポンシブイメージにする場合
 記事の横幅に合わせてブラウザが最適な画像を選択できるようにする
 WordPress でレスポンシブイメージを利用する
 Photoshop CC でレスポンシブイメージ用の画像を自動生成する
 レスポンシブイメージに関する規格
 PageSpeed Insights における画像サイズの判定
4 SVG を利用する
 <picture> でSVG に未対応のブラウザに代替画像を表示する
 SVG の最適化
5 Web フォントやアイコンフォントを利用する
 Google Fonts の利用
 Font Awesome の利用
 Web フォント/アイコンフォントのデータ量
 Web フォントの仕組み
 アイコンフォントの仕組み
 必要なアイコンのみを含んだフォントデータを作成する
6 CSS で作成したパーツを利用する
 3本線のアイコン
 円形の影付きボタン
 CSS のアイコンセットを利用する
 CSS で作成したパーツの大きさを調整する

Chapter 7 Webページの高速化
1 Web ページの表示の仕組みと高速化
リソースの読み込み
 リソースの読み込みで表示速度の改善が可能なポイント
Web ページのレンダリング
 Web ページのレンダリングで表示速度の改善が可能なポイント
 パフォーマンスの測定に関する規格
2 リソースのデータ量をミニファイ処理で削減する
 ミニファイ処理を行うツール
3 HTTP 圧縮を利用する
4 ブラウザキャッシュを利用する
5 ファイルを1つにまとめてHTTP リクエストを減らす
 CDN の利用で同時接続数の制限の壁を超える
 高解像度なデバイスに対応したCSS スプライトの設定
 CSS スプライトの画像を作成する
 インライン化でHTTP リクエストを減らす
6 レンダリングブロックを排除する
JavaScript を非同期で読み込む
 jQuery を非同期で扱ったときの問題
CSS ファイルの遅延読み込みを指定しファーストビューのCSS をインライン化する
 Web フォントの設定をインライン化する
 <link> に関する規格
 CSS を読み込むタイミングを変更する
 画像の遅延読み込み
7 コンテンツの優先順位を調整する
 ファーストビューの重要なコンテンツを先に読み込む
 インライン化を見直す
 各種リソースのデータ量を削減する

著者プロフィール

  • エ・ビスコム・テック・ラボ(著者)

    エ・ビスコム・テック・ラボ
    さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、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&スタイルシート デザインブック』同上