MdNCORPORATION

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法

こもりまさあき 著
定価 2,750円
(本体 2,500円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2012-05-25
仕様 B5変型判/224pP
ISBN 978-4-8443-6266-1
デスクトップ/ノートPCから、iPhone、iPadといったスマートフォン、タブレットまで、Webを閲覧するデバイスは多様化しています。それぞれに最適化したWebサイトを用意する必要性が発生しており、Web制作業界ではそれをいかにクリアするかが近年の課題となっています。その解決のひとつの道筋として提唱されているのが、「レスポンシブ・ウェブデザイン」です。ワンソースで全デバイスに対応したページが表示されるコーディング方法で、今後のひとつのスタンダード技法となるのではないかと注目を集めています。本書は、レスポンシブ・ウェブデザインとは何か、どのようなメリットがあるのか、どのようにデザインするのか、レスポンシブ・ウェブデザインにまつわるあらゆる項目を総合的にまとめた標準ガイドブックです。


■ページ見本










目次

■CHAPTER 1 レスポンシブ・ウェブデザインの基礎知識

レスポンシブ・ウェブデザインとは?
 スマートデバイスの登場で変わるコンテンツ配信
 これまでのWebとこれからのWeb
 レスポンシブ・ウェブデザインの登場
 レスポンシブ・ウェブデザインの実際

レスポンシブ・ウェブデザインの特徴
 レスポンシブなWebサイトの考え方
 レスポンシブ・ウェブデザインの適応範囲
 対応しきれなくなる? 次々と登場する新デバイス
 レスポンシブの実装をチェックするツール


■CHAPTER 2 レスポンシブなサイトを作ってみよう[実装:基本編]

レスポンシブなウェブサイトの設計手法
 固定ではなく、可変するものとして考える
 レスポンシブ・ウェブデザインのワークフロー
 モバイル・ファースト、ブラウザ・ファーストで
 レスポンシブなレイアウトの設計パターン
 1. 可変を前提とする
 2. カラムを落とす
 3. レイアウトを変更する
 4. 1カラムベースにする
 5. 見えない領域を使う
 切り替えのブレイクポイントを考える
 レスポンシブ・ウェブデザインの実装方法
 画面解像度に応じたワイヤーフレームの作成
 ワイヤーフレームからデザインラフへ
 多用な環境におけるデザインの実装方法
 角丸表現を例にした実装方法の違い

レスポンシブなウェブサイト実装の基本
 デバイスごとに異なるViewport
 CSS3のMedia Queriesについて
 Media Queriesが動作しない環境への対応
 HTML5をベースにしたマークアップ
 head要素のマークアップ
 body 要素のマークアップ

CSSによるデザインとレイアウト
 コンテンツの表示切り替えの注意点
 デバイスごとのスタイルの切り替え

サンプル用ファイルの作成手順
 レスポンシブ・ウェブデザインの実装
 ベーシックなデザインの実装
 PC向けの2カラムレイアウトの実装


■CHAPTER 3 レスポンシブなサイトを作ってみよう[実装:応用編]

PART 1 レイアウト指定時に押さえておきたいこと
 レイアウトのカラム数をデバイスサイズで変化させる
 レイアウトの横幅をデバイスの解像度のサイズで固定する
 レイアウトをPCやスマートデバイスのそれぞれのブラウザ幅で可変させる
 レイアウトのフォントサイズをそれぞれのデバイスによって変化させる
 意図しないフォントサイズの縮小を回避する

PART 2 画像の取り扱い方・初級編
 ひとつの画像を柔軟に使い回す
 背景画像を使ったレスポンシブな画像表現
 画像の配置にJavaScriptを利用する
 JavaScriptが無効な環境用の画像切り替え

PART 3 動画の取り扱い方・初級編
 動画の表示サイズをレスポンシブにする
 さまざまなデバイスへビデオ配信を可能にする

PART 4 タイトル・見出しを制御する
 コンテンツの横幅にフィットするテキスト
 画像化をせずにテキストで美しく装飾する

PART 5 そのほかの演出
 説明窓もレスポンシブにする
 Google Mapsをレスポンシブにする


■CHAPTER 4 レスポンシブ対応を支援するツール

Initializr
320 and up
inuit.css
Skelton
Foundation

さくいん
著者紹介

ダウンロードデータ

レスポンシブ・ウェブデザイン標準ガイド
あらゆるデバイスに対応するウェブデザインの手法
サンプルデータダウンロード


このたびは、「レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法」をご購入いただきまして、誠にありがとうございます。
以下に本書「第3章 レスポンシブなサイトを作ってみよう[実装:応用編]」の解説で使用したサンプルデータを用意しましたのでご利用ください。

データ提供:こもりまさあき氏


●ダウンロードファイル名
responsive_sample.zip(16.7MB)


[収録内容]

P.82
03-1-1 レイアウトのカラム数をデバイスサイズで変化させる

P88
03-1-2 レイアウトの横幅をデバイスの解像度のサイズで固定する

P94
03-1-3 レイアウトをPCやスマートデバイスのそれぞれのブラウザ幅で可変させる

P102
03-1-4 レイアウトのフォントサイズをそれぞれのデバイスによって変化させる

P110
03-1-5 意図しないフォントサイズの縮小を回避する

P118
03-2-1 ひとつの画像を柔軟に使い回す

P124
03-2-2 背景画像を使ったレスポンシブな画像表現

P132
03-2-3 画像の配置にJavaScriptを利用する

P140
03-2-4 JavaScriptが無効な環境用の画像切り替え

P148
03-3-1 動画の表示サイズをレスポンシブにする

P156
03-3-2 さまざまなデバイスへビデオ配信を可能にする

P164
03-4-1 コンテンツの横幅にフィットするテキスト

P172
03-4-2 画像化をせずにテキストで美しく装飾する

P180
03-5-1 説明窓もレスポンシブにする

P190
03-5-2 Google Mapsをレスポンシブにする



■ダウンロードにあたってのご注意■

ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

サンプルデータには「サンプルファイルについて.txt」が同梱されていますので、ご使用の前に必ずお読みください。

ダウンロードファイルを解凍すると、サンプルデータ(テキストデータ)が各節ごとにHTML、CSS、JavaScriptなどの各種ファイルとして収録されています。index.htmlファイルをブラウザにドラッグしたり、Webサーバにアップロードして開く、テキストエディタでソースを開くなどしてご利用ください。

※当サイトからダウンロードできるサンプルデータおよびリンクされたWebサイトを実行した結果につきましては、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。ただし「jQuery」等の一般に公開されているJavaScriptライブラリについては、各ライブラリのライセンス条件に従います。

※弊社WebサイトからダウンロードできるサンプルデータおよびリンクされたWebサイトの著作権は、それぞれの制作者に帰属します。

※本書に掲載されているHTML、CSS、JavaScript等のコメントや改行位置等は、紙面掲載用として加工しているため、ダウンロードしたサンプルデータとは異なる場合があります。

お詫びと訂正

『レスポンシブ・ウェブデザイン標準ガイドあらゆるデバイスに対応するウェブデザインの手法』

本書のアップデート情報

このたびは、「レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法」をご購入いただきまして、誠にありがとうございます。

本書で紹介しているフレームワークなどのWebサービス/Webアプリは、状況に応じてアップデートやバージョンアップが行われることがあるため、書籍執筆時点の内容から変更している場合がございます。

そこで、こうしたアップデートやバージョンアップなどによって変更された項目について把握したものを、当ページで追加で逐次情報提供いたしますので、本書をお読みになる際にご参考にしてください。



■「html5shiv.js」の使用方法について(2012.5.30)

本書P059~P060でHTML5に未対応のIEのバージョンに対して、HTML5を認識させるためのライブラリ「html5shiv.js」を紹介しておりますが、本稿執筆以降でその使用方法に変更がありました。現在は、オフィシャルページ(https://code.google.com/p/html5shiv/)中にある「1. download html5shiv (zip file)」よりファイルをダウンロード解凍後、「dist」ディレクトリ内にあるファイルを自身の環境に保存して利用します。

□distディレクトリをそのまま利用した記述例


こちらの「html5shiv.js」の使用方法変更の経緯、また詳細については以下のサイトの記事が参考になります。

「IE対応でよく利用するhtml5shivの使用方法変更について」
https://www.skyward-design.net/blog/archives/000134.html

以上

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊