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

  • 著作者名:エ・ビスコム・テック・ラボ
    • 書籍:3,218円
    • 電子版:3,218円
  • B5変型判:320ページ
  • ISBN:978-4-8399-5487-1
  • 発売日:2015年04月23日
  • 備考:初中級
  • mixiチェック
  • このエントリーをはてなブックマークに追加

内容紹介

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

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

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

続きを読む

商品を選択する

フォーマット 価格 備考
書籍 3,218
PDF 3,218 ※ご購入後、「マイページ」からファイルをダウンロードしてください。
※ご購入された電子書籍には、購入者情報、および暗号化したコードが埋め込まれております。
※購入者の個人的な利用目的以外での電子書籍の複製を禁じております。無断で複製・掲載および販売を行った場合、法律により罰せられる可能性もございますので、ご遠慮ください。

電子書籍フォーマットについて

  

備考

エ・ビスコム・テック・ラボ
さまざまなメディアにおける企画制作を世界各地のネットワークを駆使して展開。コンピュータ、インターネット関係では書籍、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 マルチデバイス対応のために必要な設定
モバイルフレンドリーに関する項目
   ビューポートの設定を行う
   コンテンツの幅が画面の幅を超えないようにする
   テキストが小さくなりすぎないようにする
   リンク同士が近すぎないようにする
   互換性のないプラグインを使用しないようにする
表示速度に関する項目
   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 コンテンツの優先順位を調整する
   ファーストビューの重要なコンテンツを先に読み込む
   インライン化を見直す
   各種リソースのデータ量を削減する
 

この商品を買った人はこんな商品も買っています


最近チェックした商品

Tポイント利用手続き

         Tポイント利用手続きに関する同意事項

                                株式会社マイナビ出版

株式会社マイナビ出版が提供するマイナビBOOKSにおいてTポイントご利用続きをされる方は、以下に掲げるお客様の個人情報の取り扱いについてご確認の上、ご同意下さい。

マイナビBOOKSにおいてTポイントサービスをご利用いただいた場合に、当社から、次に掲げる<提供情報>を、<提供目的>のためにカルチュア・コンビニエンス・クラブ株式会社(以下「CCC」といいます)へ提供します。

  <提供目的>:CCCの定める個人情報保護方針及びマイナビBOOKSにおけるT会員規約第4条に定める利用目的で利用するためTポイントサービスを利用するため
  <提供情報>:
   1)お客様が【マイナビBOOKS】の正当な利用者であるという情報
   2)ポイント数・利用日
   3)その他、Tポイントサービスを利用するにあたり必要な情報

  <提供方法>: 電磁的記録媒体の送付またはデータ通信による。ただし、提供するデータについては暗号化を施すものとする。

なお、CCCに提供された、以下の情報の利用については、CCCの定める個人情報保護方針及びT会員規約 に沿って取り扱われます。
上記の情報提供の停止をご希望される場合には、【マイナビBOOKS】におけるTポイント利用手続きの解除を実施していただく必要があります。
Tポイント利用手続きの解除、およびTポイントサービスにおける個人情報に関するお問い合わせ先は、以下のとおりです。
お客様お問い合わせ先:Tサイト(http://qa.tsite.jp/faq/show/22612)

 なお、Tポイント利用手続きの解除が完了しますと、マイナビBOOKSにおけるTポイントサービスをご利用いただけなくなりますので、予めご了承ください。

Tポイント利用手続きを行いますか?