『レスポンシブ・ウェブデザイン 標準ガイド』を買いました
来月あたりからスマフォ向けサイトを作成しようと考えていたので、購入してみました。
 | レスポンシブ・ウェブデザイン標準ガイド あらゆるデバイスに対応するウェブデザインの手法 posted with AffletLINK at 12.09.19 |
CHAPTER1 レスポンシブ・ウェブデザインの基礎知識
レスポンシブ・ウェブデザインの基礎知識
レスポンシブ・ウェブデザインのとは？
レスポンシブ・ウェブデザインの特徴CHAPTER2 レスポンシブなサイトを作ってみよう[実装：基本編]
レスポンシブなウェブサイトの設計手法 ／ レスポンシブなウェブサイト実装の基本
CSS によるデザインとレイアウト ／ サンプル用ファイルの作成手順CHAPTER3 レスポンシブなサイトを作ってみよう[実装：応用編]
PART1 レイアウト指定時に押さえておきたいこと
PART2 画像の取り扱い方・初級編
PART3 動画の取り扱い方・初級編
PART4 タイトル・見出しを制御する
PART5 そのほかの演出CHAPTER4 レスポンシブ対応を支援するツール
Initializr / 320 and up / inuit.css / Skelton / Foundation
感想とか
ひと通り読み終えて感じた本書の対象読者像は、『レスポンシブ・ウェブデザイン』ってどうやって作ればいいんだろう。どういう点に考慮しなくてはいけないんだろう。……といった疑問をお持ちの人でしょうか。
かといって、完全な初心者向けではない気がします。
書かれているコードは実践的で、コードを読んで応用できるだけの基礎がないとちょっと厳しい内容かも知れません。
レスポンシブ・ウェブデザインの情報や知識は提供してくれますが、具体的な構築方法を事細かに教えてくれる本ではなく、「解説」をしてくれる本だと思います。
学んだことをざっくりと
『レスポンシブ・ウェブデザイン』とは
とっても簡単に言うと、1つの HTML ソースでPC、タブレット、スマートフォンに対応したウェブデザインのこと。
もうちょっと言うなら、異なるデバイスに対してデバイスに合ったコンテンツと UI などの表示内容を切り替えることで、最適な情報を提供できるような仕組みを持ったデザインと言える。
『レスポンシブ・ウェブデザイン』の設計手法
『レスポンシブ・ウェブデザイン』ではデバイスの解像度でデザインが「可変する」ことを念頭に入れてと設計を行う必要がある。
「デバイスといっても PC 向け、スマートフォン向け、タブレット向けの3種類でしょ？」 という考えだったけど、これじゃあ半分正解にしかならない。
タブレットやスマートフォンでは縦向きだけでなく、横向きで使用する場合もある。そのため、設計段階からさまざまな解像度に対応できるように考慮しておかなくてはならない。
モバイルファースト、ブラウザファースト
- モバイルファースト
- スマフォ対応を優先
- 小さい解像度に合わせた構成
- スマフォ対応を優先
- ブラウザファースト
- ブラウザ対応を優先
- さまざまなブラウザでも見れるように
- ブラウザ対応を優先
どちらもシンプルな構成で作りはじめることで、情報の漏れが無いよう考慮する。
レイアウトの設計パターン
- 可変を前提
- カラムを落とす
- レイアウトを変更する
- 1カラムベースにする
- 見えない領域を使う
ブレイクポイント
メジャー。
320px | 768px | 960px
あとは実際に手を動かして、学んでいきたいと思います。
