Web の利用者が Web サイトやアプリの利用でますますモバイルデバイスを使うようになるのにつれて、Web デザイナーや開発者は自身の制作物が従来のデスクトップコンピュータと同様にモバイルデバイスでも見栄えよく、また良好に動作するようにしなければなりません。著名なデザイナーである Luke Wroblewski 氏は、デスクトップ向けデザインの後付けではなく "Mobile First" なデザインを提唱しています。モバイルデバイス向けのデザインを第一のターゲットとするか親切なおまけにするか、いずれにしても同一のコンテンツを携帯電話から大画面・高解像度のディスプレイまで、あらゆるハードウェアプラットフォームで利用できるようにするために CSS の力を活用できます。
この手法は "レスポンシブ Web デザイン" として知られています。その方策には以下のようなものがあります:
- リキッドまたはフルードレイアウト: すべてのコンテナの幅をブラウザのビューポートに対するパーセンテージとして定義することで、コンテナはブラウザのウィンドウサイズの変化に応じて広がったり縮んだりします。
- メディアクエリ: 使用しているディスプレイの特性、例えばサイズ、解像度、アスペクト比、色深度などをもとに、別々のスタイルシートを適用します。
- フルードイメージ: 画像が最大でもディスプレイの幅全体を占めるように設定します。
リソース
概要
- Responsive Web design (Ethan Marcotte 氏)
- Beginner's guide to responsive Web design (Rick Petit 氏)
- Responsive Web design: What it is and how to use it (Kayla Knight 氏)
- Multi-device Web design: an evolution (Luke Wroblewski 氏)
技術
- CSS メディアクエリ リファレンスページ
- CSS media queries and using available space (Chris Coyier 氏)
- Liquid layouts the easy way (Russ Weakley 氏)
- Fluid images (Ethan Marcotte 氏)
- Designing for touch screen (Chris Kemm 氏)
- Responsive Web Design Techniques, Tools and Design Strategies (Smashing Editorial Team)
ツール
- レスポンシブデザインビュー (Firefox)