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

備考

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

関連ページ

• サポートサイト　https://book.mynavi.jp/supportsite/detail/9784839954871.html

目次

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 画像
<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 で作成したパーツを利用する
　　　３本線のアイコン
　　　円形の影付きボタン
　　　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 フォントの設定をインライン化する
　　　<link> に関する規格
　　　CSS を読み込むタイミングを変更する
　　　画像の遅延読み込み
7 コンテンツの優先順位を調整する
　　　ファーストビューの重要なコンテンツを先に読み込む
　　　インライン化を見直す
　　　各種リソースのデータ量を削減する