レスポンシブWebデザイン (Responsive Web Design : RWD)
導入
レスポンシブWebデザインとはスクリーンの幅に応じてCSSを切り替え、レイアウトを調整する方法です。これは主に次の3つの手法によって実現されます。
- リキッドレイアウト (Liquid Layout) / フルードグリッド (Fluid Grid)… リキッドレイアウトとは、以下の2つのデザイン手法を組み合わせたもの。
- グリッドデザイン (Grid Design) … ページの要素をマス目に沿って配置する。
- フルードデザイン (Fluid Design) … スクリーンの幅が変わっても、レイアウトを維持したまま要素のサイズを調整する。
- メディアクエリー (Media Query) … 解像度、スクリーン幅、デバイスの向きなどの条件に合わせて異なるCSSを適用する。
- フルードイメージ (Fluid Image) … レイアウトの大きさに従って、画像のサイズを拡大/縮小する。
これらを適用する方法は、Media Queriesなどで紹介されている実例で確認するのが確実です。
リキッドレイアウト (Liquid Layout)
グリッドデザイン (Grid Design)
グリッドの幅としては、以下に示す960の約数が適しているようです。ASCII.jp：メディアクエリーの設定とグリッドデザインの導入 (2/3)｜ゼロから始めるレスポンシブWebデザイン入門
960の約数
1、2、3、4、5、6、8、10、12、15、16、20、24、30、32、40、48、60、64、80、96、120、160、192、240、320、480、960
フルードデザイン (Fluid Design) / フルード レイアウト (Fluid Layout)
レイアウトにはwidth、margin、paddingでの長さの指定方法によって、次の3つがあります。
- フィックス レイアウト (Fixed Layout) … 絶対単位のpxで指定
- エラスティック レイアウト (Elastic Layout) … 相対単位のemで指定
- フルード レイアウト (Fluid Layout) … 割合の%で指定
レスポンシブWebデザインを実現するには、この中のフルード レイアウトを採用します。
参考
- Creating Liquid Layouts with Negative Margins · An A List Apart Article Ryan Brill (2004/06/15)
メディアクエリー (Media Query)
メディアタイプによるCSSの切り替えは、HTMLのlink要素またはCSSの@mediaで実現できます。
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
ASCII.jp：メディアクエリーの設定とグリッドデザインの導入 (3/3)｜ゼロから始めるレスポンシブWebデザイン入門
フルードイメージ (Fluid Image)
画像をスクリーンの最大幅に収めるようにするには、img要素の最大幅を100%以下に設定します。なおこのmax-width属性は、Internet Explorer 7以降でサポートされます。Browser compatibility - max-width - CSS | MDN
img { max-width: 100%; }
この手法は画像以外にも適用できます。
img, embed, object, video {
max-width: 100%;
}
参考
- Fluid Images · An A List Apart Article Ethan Marcotte (2011/06/07)
- ASCII.jp：フルードイメージの導入とタイポグラフィの設定 (1/3)｜ゼロから始めるレスポンシブWebデザイン入門 菊池崇 (2012/06/26)
viewport
モバイル ブラウザでのレイアウトの問題に対処するには、meta要素のviewportでその表示方法を指定します。
<meta name="viewport" content="width=device-width, initial-scale=1">
| 適用前 | 適用後 |
|---|---|
 |
 |
参考
動作確認
Windowsでスクリーン サイズに応じたレイアウトの変化を確認するには、[パフォーマンス オプション]の【視覚効果 → ドラッグ中にウィンドウの内容を表示する】を有効にします。こうするとウィンドウのサイズを変更するごとにコンテンツが再描画されるため、動作を確認しやすくなります。
ツール
特定のスクリーン サイズでのレイアウトを確認するには、次のようなツールが便利です。
- Internet Explorerのエミュレーション
… F12、Ctrl + 8で開かれるエミュレーションで、[解像度]を変更 - Firefoxのレスポンシブデザインビュー
… Ctrl + Shift + M - Google ChromeのDevice Mode
… デベロッパーツールを有効にした状態でCtrl + Shift + M
参考
- ASCII.jp：ゼロから始めるレスポンシブWebデザイン入門 菊池崇 (～2012/07/17)
レスポンシブ ウェブ デザイン - ウェブマスター向けモバイルガイド- レスポンシブ ウェブ デザイン | 検索 | Google Developers
- レスポンシブ ウェブデザインの基本 | Web | Google Developers