書籍中のリンク集
第5章 レスポンシブWebデザインの基礎の実践
5.1.1. メディアクエリの仕様
- Media Queries - W3C Recommendation 19 June 2012
- メディアクエリー - 2012年6月19日付 W3C 勧告 (Recommendation)
- 【DEMO】 メディアクエリの幅の指定にはその数値も含まれる
5.1.2. メディアクエリの設置方法
- LESS
- CodeKit
- WinLess
- 【DEMO】 モバイルファーストなメディアクエリの指定方法
- 【DEMO】 モバイルファーストなメディアクエリの指定方法 (CSS)
- 【DEMO】 デスクトップファーストなメディアクエリの指定方法
- 【DEMO】 デスクトップファーストなメディアクエリの指定方法 (CSS)
5.1.7. サポートのないブラウザへの対応
5.2.2. デスクトップとスマホのViewportの定義
5.2.5. Viewportメタタグの仕様
5.2.7. 現状のベスト・プラクティス
- viewport - Safari HTML Reference - Safari Developer Library
- Targeting Screens from Web Apps - Android Developers
- ウェブアプリの画面対応 - ソフトウェア技術ドキュメントを勝手に翻訳
5.3.1. リキッドレイアウトとは?
5.3.2. 画像やビデオをリキッド対応する
- 【DEMO】 画像をフレキシブルにする方法
- CSS: Elastic Videos - Web Designer Wall
- 【DEMO】 YouTubeやVimeoの動画をふれきしぶるフレキシブルにする方法
5.3.3. リキッドにレイアウトする際の注意点
- 【DEMO】 スマホ表示で背景画像が切れてしまう例
- 【DEMO】 スマホ表示で背景画像が切れてしまう例 (修正後)
- 【DEMO】 テキスト画像の背景が途中で切れてしまう
- 【DEMO】 ナビゲーションの文字数と改行
- 【DEMO】 ナビゲーションの文字数と改行 (修正後)
- 【DEMO】 見出し背景の横幅と改行
- 【DEMO】 見出し背景の横幅と改行 (修正後)
- Vertical Centering in CSS
- cssで中断表示する方法 - 忘却の WEB プログラマー人 生辞書
- 【DEMO】 リキッドレイアウトにする際の注意点: ボックスの上下左右の中央にテキストを配置する
- 5.3.のデモページ一覧
5.4.1. グリッドで考えるレイアウト
5.4.2. レスポンシブなグリッド・システムの基本
- 960 Grid System
- 1140 CSS Grid System
- Responsive Grid System
- The Grid - Foundation
- Golden Grid System
- Less Framework 4
5.4.3. 制作現場で使えるグリッド・システムの条件
5.4.4. 基本的なグリッド・システムを構築する
- 【DEMO】 基本的なグリッド・システムを構築する
- HTML5 Boilerplate
- レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い - Rriver
- 【DEMO】 カラムの表示順を変えるPUSHとPULL
5.4.6. モバイル表示の対応
5.5.1. 最適化の基本
- Using site speed in web search ranking - Google Webmaster Central Blog
- Online Experiments: Lessons Learned (PDF)
- アカマイ
- Amazon CloudFront
5.5.4. CodeKitでCSSの管理を効率化
5.5.8. PNGとGIFの特徴と向いている画像のタイプ
5.5.9.
5.6.2. CSSスプライトのソースコードの全貌
5.6.3. CSSスプライトのソースコードの説明
5.6.5. スプライト画像作成の際の注意点
5.7.1. IE6とIE7対応のヒント
5.7.2. IE対応しない場合の対処方法
5.7.4. メディアクエリへの対応
5.7.5. HTML5への対応
5.7.6. CSS3への対応
(最終チェック日: 2012/12/19)