レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法 立ち読み 関連商品

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

出版社 エムディエヌコーポレーション
著者 こもりまさあき
対応デバイス
PC対応 iPhone対応 iPad対応 Android対応

この本の内容

【PC、タブレット、スマホまで、Webはいちいち作り替えない!】
PCから、スマートフォン、タブレットと、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 レイアウト指定時に押さえておきたいこと/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
著者紹介
奥付
カバー

この著者の他の本

プロとして恥ずかしくない 新・...
Web制作者のためのSubli...
すべての人に知っておいてほしい...
WordPress高速化&スマ...
HTML5+CSS3の新しい教...
基礎から覚える、深く理解できる...
WebデザイナーのためのHTM...