半年以上前にアメリカのe-learningで学習しながら作成した「Responsive Web Design」の学習メモです。この記事もやや古くなったので、最後に補足事項を記載しました。
従来のデザインからレスポンシブ・ウェブデザインへ移行するための参考資料として作成しました。若干殴り書きもありますが、公開しちゃいます。
Responsive Web Designとは - 従来のデザインと比較する
下へ行くほど柔軟に変化するレイアウトとなる。
Grid layout : どのデバイスでも同じようなデザインにする
→ Fluid layout : デバイス(ウィンドウ)の幅に合わせて伸縮するデザイン
→ → Adaptive layout : media queryを使い、ターゲットデバイスに合わせてデザインする
→ → → Responsive layout : media queryを使い、ターゲットデバイスを決めるのではなく、様々な環境に適用させる)
関連するリンク集&テクニック
画像サイズを可変にする(Fluid layout)
img {
/* ボックス幅に合わせて拡大される。ただしIE6以下には非対応 */
max-width: 100%;
}
/* IE6以下専用のCSSで以下のようにボックスとwidthを指定する */
.main img {
width: 100%;
}
<!--[if IE]>
<link href="{{ asset_url }}" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
幅をパーセントで指定する
ピクセルをパーセントに書き換える方程式
target ÷ context = result
書き換える例
親ブロック width: 1000px
子ブロック width: 400px
↓↓↓
方程式に当てはめる
400 ÷ 1000 = 0.4 = 40%
↓↓↓
親ブロック width: 1000px
子ブロック width: 40%
親ブロックのwidthを変更すれば、子ブロックの幅も同じ割合で変化するようになる
幅固定のレイアウトからFluid layoutへCSSを書き換える
変更前の幅固定の状態
.container {
width: 1000px;
}
幅を%指定に変更し、最大幅に元の値を入れる。外の余白をautoにする
.container {
width: 90%;
max-width: 1000px;
margin: auto;
}
/* 子のボックスもem指定にする */
.container .box1 {
/* width: 300px; ← 修正前 */
width: 30%; /* ← 修正後 */
/* 300 ÷ 1000 = 0.3 = 30% */
}
.container .box1 .box1-1 {
/* width 120px; ← 修正前 */
width: 40%; /* ← 修正後 */
/* 120 ÷ 300 = 0.4 = 40% */
/* 直近の親のボックスに対する割合である点に注意する */
}
フォントサイズもpxからemに書き換える
/* 修正前 */
/*
body { font-size: 16px; }
h1 { font-size: 24px; }
p { font-size: 12px; }
*/
/* 修正後 */
body { font-size: 16px; }
h1 { font-size: 1.5em; } /* 24px ÷ 16px = 1.5em */
p { font-size: 0.75em; } /* 12px ÷ 16px = 0.75em */
※remという単位について、最後に追記しました
iPhoneなどのデバイスにおける自動的な縮小を避ける
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
リンク集(ほぼ英語、未整理)
30 Useful Responsive Web Design Tutorials
http://www.hongkiat.com/blog/responsive-web-tutorials/
Quirktools | Screenfly - デザイン確認ツール。
http://quirktools.com/screenfly/
Adobe Inspect - デザイン確認ツール。 元はAdobe Shadowという名前だったらしい。
http://html.adobe.com/edge/inspect/
brad frost web
http://bradfrostweb.com/
picturefill - 複数サイズの画像を提供する
http://scottjehl.github.io/picturefill/
https://github.com/scottjehl/picturefill
Adaptive Images - 複数サイズの画像を提供する
http://adaptive-images.com/
FitText.js - 文字サイズをウィンドウ幅に応じてフィットさせる
http://fittextjs.com/
FitVid.js - ビデオをウィンドウ幅に応じてフィットさせる
http://fitvidsjs.com/
2015/04/30追記
半年ぶりに振り返ってみました。デザイン確認ツールなど変わってきているような気がします。
今風のデザイン確認ツール
- Google Chromeのデバッグ機能から確認デバイスを選択
- Googleモバイルフレンドリーテスト
タッチ可能な領域のサイズを約44x44ポイント以上にする
iOSの「ヒューマンユーザーインターフェースガイドライン」では「タッチ可能な領域のサイズを約44x44ポイントにしなさい」
とのこと。
emの代わりにremを使う
レガシーブラウザのサポートなど課題があるようですが、remという単位を使うという選択もあるようです。