このページの本文へ

書き下ろしminiブックがもらえるキャンペーンも!

RWD入門の決定版!『レスポンシブWebデザイン』発売

2013年07月31日 11時00分更新

Web Professional編集部

  • この記事をはてなブックマークに追加
本文印刷

 マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」について解説した書籍レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック(菊池 崇著)が、アスキー・メディアワークスから発売されました。Amazon.co.jpほかネット書店、大型書店で購入できます。

■Amazon.co.jpで購入

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入門」……応募者全員
応募方法
  1. Amazon.co.jpで『レスポンシブWebデザイン』を購入します。
  2. 購入後、Amazon.co.jpから送信される「注文確認メール」に記載されている注文番号を控えます。
  3. 以下の応募フォームから、お名前、メールアドレス、Amazon.co.jpの注文番号を入力して送信します。
  4. 応募者全員に電子メールでminiブックのダウンロードURLを通知します(8月9日8月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デザイン

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く