マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」について解説した書籍『レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック』（菊池 崇著）が、アスキー・メディアワークスから発売されました。Amazon.co.jpほかネット書店、大型書店で購入できます。
■Amazon.co.jpで購入
レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)菊池崇(著)アスキー・メディアワークス
RWDの基礎をしっかり解説、パフォーマンス改善などの上級テクも
スマートフォンやタブレットなど、マルチデバイスにワンソースで対応するWeb制作手法「レスポンシブWebデザイン」(RWD)。本書は、 RWDの提唱者であるイーサン・マルコッテ氏が定義するRWDの3大要素「フルードイメージ」「フルードグリッド」「メディアクエリー」に準拠し、レスポ ンシブWebデザインの基礎から実践までを解説した本です。
基礎編では、簡単なサンプルサイトを作りながらチュートリアル形式でRWDの3大要素をしっかり解説。流行に流されないベーシックなスキルを習得できまるように構成しました。
基礎編のページ。レスポンシブWebデザインの基礎をていねいに解説しています
実践編では、国内でいち早くRWDに取り組んできた著者のノウハウを多数紹介。解像度に応じて複数の画像を切り替える「レスポンシブイメージ」、表組みを見やすくする「レスポンシブテーブル」など、現場のテクニックを惜しみなく盛り込みました。
さらに応用編では、RWDの課題であるパフォーマンス改善のアイデアや、解像度に依存しない新しいRWDの考え方など、最新トレンドを踏まえた高度な内容も収録しています。
早期購入者には書き下ろしminiブックをプレゼント！
Amazonで早期購入された方にはこちらのPDFをプレゼント！
本書の発売を記念して、早期購入された方にはプレゼントを用意しました。2013年8月7日までのキャンペーン期間中、Amazon.co.jpで本書を購入し、本ページのフォームから応募された方全員に、書き下ろしminiブック『レスポンシブWebデザインが3倍ラクになる Flexbox入門』（PDFファイル）を差し上げます。レスポンシブWebデザインのレイアウトに便利なCSS3の新機能「Flexbox」について、A5判／16ページにコンパクトにまとめた小冊子のPDF版です。
キャンペーンの概要、応募方法は以下のとおり。注目の新技術をこの機会に本書で学んでみませんか？
- キャンペーン期間
- 2013年7月31日（水）0時〜8月7日（水）23時59分
- 応募対象
- キャンペーン期間中、書籍『レスポンシブWebデザイン』をAmazon.co.jpで購入し、本ページの応募フォームからキャンペーンへお申込みいただいた方
- 賞品
- PDFファイル「レスポンシブWebデザインが3倍ラクになる Flexbox入門」……応募者全員
- 応募方法
- Amazon.co.jpで『レスポンシブWebデザイン』を購入します。
- 購入後、Amazon.co.jpから送信される「注文確認メール」に記載されている注文番号を控えます。
- 以下の応募フォームから、お名前、メールアドレス、Amazon.co.jpの注文番号を入力して送信します。
- 応募者全員に電子メールでminiブックのダウンロードURLを通知します（
8月9日８月12日ごろの予定）。
※本キャンペーンは終了しました。応募ありがとうございました。
レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック
| Image from Amazon.co.jp |
 |
|---|
| レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL) |
菊池崇 著
- 定価：2,625円 (本体2,500円)
- 発売日：2013年7月31日
- 形態：B5変 (232ページ)
- ISBN：978-4-04-886323-0
- 発行：アスキー・メディアワークス
- 発売：KADOKAWA
目次
- 第1章［導入編］マルチデバイス時代とレスポンシブWebデザインの誕生
- ［1-1］レスポンシブWebデザインとは
- ［Follow up1］レスポンシブWebデザインを支える「モバイルファースト」のコンセプト
- 第2章［基礎編］サンプルで学ぶレスポンシブWebデザインの基本
- ［2-1］レスポンシブWebデザインのワークフローと画面設計
- ［2-2］HTMLの用意とリセットCSSの作成
- ［2-3］フルードイメージの導入とタイポグラフィの基本設定
- ［2-4］ヘッダー／フッターとコンテンツ領域のスタイリング
- ［2-5］メディアクエリーの設定とグリッドデザインの導入
- ［2-6］フルードグリッドへの変換
- ［2-7］レスポンシブタイプセッティング
- ［Follow up2］Viewportを理解しよう
- ［Follow up3］メディアクエリーを使いこなす
- ［Follow up4］フルードグリッドの必要性
- ［Follow up5］次の新しい単位「rem」
- ［Follow up6］スマートフォンで文字を見やすくするテクニック
- 第3章［実践編］商用サイトで通じるプロのテクニック
- ［3-1］リセットCSSの最適化
- ［3-2］Less Frameworkを利用したグリッドレイアウト
- ［3-3］レスポンシブイメージの実装
- ［3-4］高解像度ディスプレイへの対応
- ［3-5］ナビゲーションパターンとレイアウト設計
- ［3-6］テーブルとビデオのレスポンシブ化
- ［Follow up7］srcset属性によるレスポンシブイメージの標準化
- ［Follow up8］デザイニングインブラウザーを助けるツール
- 第4章［応用編］高度なレスポンシブWebデザインの実践
- ［4-1］文字数をベースにしたブレイクポイントの設定
- ［4-2］パフォーマンス改善の基本
- ［4-3］Data URIとアイコンフォントによるHTTPリクエストの削減
- ［4-4］画像の最適化によるパフォーマンスの改善
- ［4-5］ソーシャルメディアボタンの最適化
- ［4-6］これからのレスポンシブWebデザイン
- ［Follow up9］パフォーマンス計測ツールの利用
- ［Follow up10］スマートテレビとレスポンシブWebデザイン
