レスポンシブWebデザイン入門

CHapter1 レスポンシブWebデザイン概要

1.1 レスポンシブWebデザインとは

• [P.14] Starbucks Coffee Company
• [P.14] Media Queries

1.4 レスポンシブWebデザインの設計

• [P.23] LukeW | Mobile First -a mobile strategy & design book by Luke Wroblewski
• [P.23] University of California, San Diego

1.6 メディアクエリ

• [P.28] Respond.js
• [P.28] css3-mediaqueries-js
• [P.31] The picture element
• [P.31] Balancing Text for better readability | Web Platform Team Blog

1.9 テストに便利なツール

• [P.39] Viewport Resizer
• [P.40] Responsive Design Bookmarklet
• [P.40] responsive-web-design
• [P.42] responsivepx
• [P.43] Screenqueri.es
• [P.43] Screenfly
• [P.43] Simple Media Queries Tester
• [P.46] Android SDK | Android Developers
• [P.48] Java SE Downloads
• [P.50] Adobe Edge Inspect
• [P.51] My DebugBar | IETester
• [P.51] Sauce Labs

Chapter2 レスポンシブWebデザインのレイアウトパターン

2.1 ワンカラムレイアウト

• [P.58] Google Chrome Frame
• [P.59] Normalize.css: Make browsers render all elements more consistently.
• [P.59] html5shiv - HTML5 IE enabling script - Google Project Hosting
• [P.65] iOSヒューマンインターフェイスガイドライン
• [P.68] Stinkdigital - Home
• [P.68] Ordered List

2.2 フルードレイアウト

• [P.79] Evening Edition | The perfect commute-sized way to catch up on the day’s news
• [P.79] Gareth Lawn // Print & Web Design

2.3 ドロップレイアウト

• [P.94] Microsoft Home Page | Devices and Services
• [P.94] Introducing The Novel

2.4 固定幅+フルードグリッドレイアウト

• [P.101] CSS3 PIE: CSS3 decorations for IE
• [P.108] Latest | Bahston Film Critic
• [P.108] Breaking news from New Zealand Marketing magazine :: StopPress

2.5 シフトレイアウト

• [P.121] Hundredth Monkey PR
• [P.121] Cantina Dorigati - Vini pregiati dal 1858 - Mezzocorona, Trento

2.6 ワンキャンバスレイアウト

• [P.126] iScroll
• [P.126] jQuery Mobile
• [P.136] The Next Web - International technology news, business & culture

2.7 ダイナミックフルードレイアウト

• [P.138] jQuery Masonry
• [P.148] NHKスタジオパーク
• [P.148] Inspire Well

Chapter3 レスポンシブWebデザインのサイト制作

3.1 情報設計と画面設計

• [P.154] Gridulator
• [P.154] The 1140px CSS Grid System
• [P.155] BluCSS

3.2 Style TilesとStyle Guide

• [P.157] Style Tiles
• [P.159] Designing MyGov » Project MyUSA
• [P.159] Examples of National Park Style Tiles
• [P.160] Google HTML/CSS Style Guide
• [P.160] Starbucks Style Guide
• [P.161] Bootstrap
• [P.169] LESS
• [P.169] Sass

3.3 プロトタイプ

• [P.170] DummyImage.com
• [P.170] Cambelt
• [P.171] Dummy Text Generator
• [P.171] 日本語 Lorem ipsum
• [P.178] ResponsiveSlides.js
• [P.193] Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法

3.4 スモールサイズの実装

• [P.211] Font Awesome

3.9 ギャラリーページ

• [P.254] fancyBox

Chapter4 発展的な技術やツール

4.1 グリッドシステムとフレームワーク

• [P.272] 960 Grid System
• [P.273] Responsive Grid System
• [P.273] The Semantic Grid System
• [P.274] Gridpak
• [P.274] Responsify.it
• [P.275] Foundation
• [P.275] Skeleton
• [P.276] Gumby
• [P.277] Amazium
• [P.277] Kube CSS
• [P.278] Frameless

4.2 画面サイズの取得や機能判別を行う

• [P.281] paulirish/matchMedia.js
• [P.281] Breakpoints.js
• [P.282] Response JS
• [P.284] Modernizr
• [P.286] LukeW | RESS: Responsive Design + Server Side Components

4.3 ナビゲーションの見せ方

• [P.290] TinyNav.js · Convert navigation to a select dropdown on small screen

4.4 テーブルの実装

• [P.300] Responsive Tables with CSS/JS
• [P.301] FooTable
• [P.302] FitText
• [P.302] FitVids.JS
• [P.302] Galleria
• [P.302] FlexSlider 2

4.5 SVG

• [P.304] 10分でわかるSVG 基礎編（1/5）- ＠IT

4.6 画像の対応方法

• [P.308] Responsive Images
• [P.309] picturefill
• [P.309] Responsive-Enhance
• [P.309] hisrc
• [P.309] Testing Responsive Images
• [P.309] Adaptive Images in HTML
• [P.311] ImageOptim
• [P.311] JPEGmini
• [P.311] レスポンシブWebデザインの画像問題の解決法5種 │ Design Spice

4.7 Webフォント

• [P.314] Google Web Fonts
• [P.314] Typekit
• [P.314] デコもじ
• [P.314] FONTPLUS
• [P.314] TypeSquare
• [P.314] Foundation Icons Fonts

3.8 高解像度ディスプレイへの対応

• [P.317] Retina.js