レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック

関連サイト

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

• Web Professional Books

内容紹介

スマートフォンやタブレットなど、マルチデバイスにワンソースで対応するWeb制作手法「レスポンシブWebデザイン」(RWD)。Googleがスマートフォン最適化の手法として推奨するなど、海外ではWeb制作のスタンダードとして定着しつつあります。

本書では、RWDの基礎をチュートリアルでていねいに解説。RWDの提唱者であるイーサン・マルコッテ氏が定義する3大要素「フルードイメージ」「フルードグリッド」「メディアクエリー」に準拠し、流行に流されないベーシックなスキルを習得できます。また、「実践編」として、国内でいち早くRWDに取り組んできた著者が蓄積した豊富なノウハウを多数紹介。

解像度に応じて複数の画像を切り替える「レスポンシブイメージ」、表組みを見やすくする「レスポンシブテーブル」、マルチデバイス対応を見据えたナビゲーション設計のポイントなど、現場のテクニックを惜しみなく盛り込みました。

さらに「応用編」として、解像度に依存しない新しいRWDの考え方や、RWDの課題であるパフォーマンス改善のアイデア、スマートテレビ対応のポイントも掲載しています。

書誌情報

• 著者: 菊池崇
• 発行日: 2015-10-31 (紙書籍版発行日: 2013-07-31)
• 最終更新日: 2015-10-31
• バージョン: 1.0.0
• ページ数: 232ページ(PDF版換算)
• 対応フォーマット: PDF
• 出版社: KADOKAWA/アスキー・メディアワークス

対象読者

デザイナー、ディレクター、マークアップエンジニア

著者について

菊池崇

Web Directions East(http://east.webdirections.org/)代表 allWebクリエイター塾(http://all-web.org/)講師
大手IT企業、システム会社、Web制作会社のコンサルティングや、企業向け研修、イベント出演、執筆などを行なう。自身でも大手通信会社のアプリ案件のUI設計を担当。モバイルファースト、レスポンシブWebデザインなどの最新情報を日本のWebメディアにいち早く寄稿し、話題を提供している。

目次

第1章【導入編】マルチデバイス時代とレスポンシブWebデザインの誕生

• 1-1 レスポンシブWebデザインとは

第2章【基礎編】サンプルで学ぶレスポンシブWebデザインの基本

• 2-1 レスポンシブWebデザインのワークフローと画面設計
• 2-2 HTMLの用意とリセットCSSの作成
• 2-3 フルードイメージの導入とタイポグラフィの基本設定
• 2-4 ヘッダー／フッターとコンテンツ領域のスタイリング
• 2-5 メディアクエリーの設定とグリッドデザインの導入
• 2-6 フルードグリッドへの変換
• 2-7 レスポンシブタイプセッティング

第3章【実践編】商用サイトで通じるプロのテクニック

• 3-1 リセットCSSの最適化
• 3-2 Less Frameworkを利用したグリッドレイアウト
• 3-3 レスポンシブイメージの実装
• 3-4 高解像度ディスプレイへの対応
• 3-5 ナビゲーションパターンとレイアウト設計
• 3-6 テーブルとビデオのレスポンシブ化

第4章【応用編】高度なレスポンシブWebデザインの実践

• 4-1 文字をベースにしたブレイクポイントの設定
• 4-2 パフォーマンス改善の基本
• 4-3 Data URIとアイコンフォントによるHTTPリクエストの削減
• 4-4 画像の最適化によるパフォーマンスの改善
• 4-5 ソーシャルメディアボタンの最適化
• 4-6 これからのレスポンシブWebデザイン