レスポンシブウェブデザイン
ブラウザ幅が小さくなると、それに合わせてレイアウトも変わるという例のアレ
色々なデバイスに対してよりよい表示を提供していこうという考えのなかの一つの方法
メリット
- ソースは1つなので管理が楽
- 新しいデバイスごとに対応しなくていい
- URLが分散しないので、SEO的に有利(と言われている)
デメリット
- ファイルサイズが大きくなりがち(モバイル苦しい)
- 設計が失敗すると大変
- CSS作成のワークフローが変わって面倒
- 古いブラウザに対応するのが難しい(IE8以下はもう未対応)
魔法の技術ではないが、やる価値はある
モバイルファースト
スマホの表示に時間がかかっていませんか？
ほとんど3Gなので、回線は遅くなりがちです
画面は狭いし、一度に表示できるものにも限度がある
→スマホには本当に大事なことだけを表示させたい→「モバイルファースト」
モバイル環境になったとき、本当に必要なコンテンツは何かを考えながらページを作る
×狭くなったからカラムを落とす
◯広くなったからカラムを増やす
「いらないものを隠すのではなく、画面が広くなったら情報を飾るスペースが増える」
メディアクエリ と ブレイクポイント
ブレイクポイント 表示が切り替わるところ
メディアクエリ media属性によって使うメディアを使い分ける
Twenty Twelveのブレイクポイントは 600px と 960px(幅の最大値)
// 全体で共通するスタイル // ... @media screen and (min-width: 600px) { // 600px以上で適用したいスタイル } @media screen and (min-width: 960px) { // 960px以上で適用したいスタイル }
相対的に考える
コンテンツの幅、マージンなどは、%で考え、相対的に考える
ブレイクポイントでの切り替わりのみでもよい。
PS用に固定レイアウト、スマホで切り替わるというのも立派なレスポンシブ
rem CSS3から登場した ルートのフォントサイズを継承
$rembase: 14; $line-height: 24; ... ... padding: 5px 0; // remを理解しないブラウザのため padding: 0.357142857rem 0; (5 / $rembase);
(当然のことながら、CSSファイルは巨大になりがちなので気をつけること)
Twitter Bootstrapなどヒントがいっぱい
viewportの設定
(IE8以下にメディアクエリを読み込ませるとクラッシュする)
(IE8以下でメディアクエリぽいことをさせるスクリプトを書くか、そもそも読み込ませないか、どっちか。)
追記
ただし、既存のページにレスポンシブデザインを当てこむのはかなり難しい。
完成したテーマにたいし簡単にカラムを追加するのはとても難しいから。
