MdNの本

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

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

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

PC、タブレット、スマホまで、Webはいちいち作り替えない!

こもりまさあき 著
B5変型判 / 224pP
ISBN978-4-8443-6266-1 / 価格(本体2,500円+税)※電子版の価格は販売ストアにて
2012年05月25日発売

デスクトップ/ノートPCから、iPhone、iPadといったスマートフォン、タブレットまで、Webを閲覧するデバイスは多様化しています。それぞれに最適化したWebサイトを用意する必要性が発生しており、Web制作業界ではそれをいかにクリアするかが近年の課題となっています。その解決のひとつの道筋として提唱されているのが、「レスポンシブ・ウェブデザイン」です。ワンソースで全デバイスに対応したページが表示されるコーディング方法で、今後のひとつのスタンダード技法となるのではないかと注目を集めています。本書は、レスポンシブ・ウェブデザインとは何か、どのようなメリットがあるのか、どのようにデザインするのか、レスポンシブ・ウェブデザインにまつわるあらゆる項目を総合的にまとめた標準ガイドブックです。

twitter facebook google+ このエントリーをはてなブックマークに追加 RSS

ページイメージ

クリックすると折りたためます
■ページ見本










目次

クリックすると開きます

【目次】
■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

さくいん
著者紹介

カスタマーレビュー(出典:amazon.co.jp)

カスタマーレビュー(出典:amazon.co.jp)