購入前に目次をご確認ください
MdN Web Mook レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法
エムディエヌコーポレーション / 2012年05月25日 / 全226ページ
【PC、タブレット、スマホまで、Webはいちいち作り替えない！】
PCから、スマートフォン、タブレットと、Webを閲覧するデバイスは多様化の一途を辿っています。Web制作業界では、それぞれに最適化したWebサイトをいかに用意するかが課題となっています。その解決のひとつの道筋として提唱されているのが、レスポンシブ・ウェブデザイン。ワンソースで全デバイスに対応したページが表示できるコーディング方法で注目を集めています。本書は、レスポンシブ・ウェブデザインにまつわるあらゆる項目を総合的にまとめた標準ガイドブックです。
PCから、スマートフォン、タブレットと、Webを閲覧するデバイスは多様化の一途を辿っています。Web制作業界では、それぞれに最適化したWebサイトをいかに用意するかが課題となっています。その解決のひとつの道筋として提唱されているのが、レスポンシブ・ウェブデザイン。ワンソースで全デバイスに対応したページが表示できるコーディング方法で注目を集めています。本書は、レスポンシブ・ウェブデザインにまつわるあらゆる項目を総合的にまとめた標準ガイドブックです。
目次
- レスポンシブ・ウェブサイトギャラリー
- 扉
- 免責事項
- はじめに
- 目次
- 本書の使い方
- ■CHAPTER 1 レスポンシブ・ウェブデザインの基礎知識
- レスポンシブ・ウェブデザインとは？／スマートデバイスの登場で変わるコンテンツ配信／これまでのWebとこれからのWeb
- レスポンシブ・ウェブデザインの登場
- レスポンシブ・ウェブデザインの実際
- レスポンシブ・ウェブデザインの特徴／レスポンシブなWebサイトの考え方
- レスポンシブ・ウェブデザインの適応範囲
- 対応しきれなくなる？ 次々と登場する新デバイス
- レスポンシブの実装をチェックするツール
- ■CHAPTER 2 レスポンシブなサイトを作ってみよう［実装：基本編］
- レスポンシブなウェブサイトの設計手法／固定ではなく、可変するものとして考える
- レスポンシブ・ウェブデザインのワークフロー
- モバイル・ファースト、ブラウザ・ファーストで
- レスポンシブなレイアウトの設計パターン
- 1．可変を前提とする
- レスポンシブ・ウェブサイトギャラリー
- 扉
- 免責事項
- はじめに
- 目次
- 本書の使い方
- ■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 レイアウト指定時に押さえておきたいこと／1-1 レイアウトのカラム数をデバイスサイズで変化させる
- 1-2 レイアウトの横幅をデバイスの解像度のサイズで固定する
- 1-3 レイアウトをPCやスマートデバイスのそれぞれのブラウザ幅で可変させる
- 1-4 レイアウトのフォントサイズをそれぞれのデバイスによって変化させる
- 1-5 意図しないフォントサイズの縮小を回避する
- PART 2 画像の取り扱い方・初級編
- 2-1 ひとつの画像を柔軟に使い回す
- 2-2 背景画像を使ったレスポンシブな画像表現
- 2-3 画像の配置にJavaScriptを利用する
- 2-4 JavaScriptが無効な環境用の画像切り替え
- PART 3 動画の取り扱い方・初級編
- 動画の表示サイズをレスポンシブにする
- さまざまなデバイスへビデオ配信を可能にする
- PART 4 タイトル・見出しを制御する／コンテンツの横幅にフィットするテキスト
- 画像化をせずにテキストで美しく装飾する
- PART 5 そのほかの演出
- 説明窓もレスポンシブにする
- Google Mapsをレスポンシブにする
- ■CHAPTER 4 レスポンシブ対応を支援するツール
- 1 Initializr
- 2 320 and up
- 3 inuit.css
- 4 Skelton
- 5 Foundation
- INDEX
- 著者紹介
- 奥付
- カバー
※このデジタル雑誌には目次に記載されているコンテンツが含まれています。それ以外のコンテンツは、本誌のコンテンツであっても含まれていません のでご注意ください。
※電子版では、紙の雑誌と内容が一部異なる場合や、掲載されないページがある場合があります。
