レスポンシブ ウェブ デザイン 作り方

レスポンシブ ウェブ デザイン の作り方をまとめてみた。

必要条件：ヘッダのメタタグにビューポートを使用する。

メタ ビューポートのコード
<meta name=viewport content="width=device-width, initial-scale=1">

• width=device-width：画面サイズに合わせてコンテンツをリフロー

• initial-scale=1：デバイス方向無関係に CSS ピクセルとデバイス非依存ピクセル間に 1:1 関係確立。→横向きでページ幅全体を利用

ヘッダにこの一文を入れれば、とりあえずレスポンシブなサイトになる。ブラウザの幅をグリグリ動かせば、確認できる。ただし、画像など大きな固定幅の要素があると正しく表示できない。width: 100% などの相対的な幅の値を使用する。PCは2カラム、スマホは1カラムで表示したい場合などは、 CSS メディア クエリ を使用する。

スマホ用に最大ブラウザ幅： ～640px をスタイルシートリンクで指定
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">

タブレット用にブラウザ幅：500px ～ 600px をCSS ファイル内 @media で指定
@media (min-width: 500px) and (max-width: 600px) {
/* タブレット用スタイルシート */
}

PC用は min-width を印刷用は print 属性を指定。

サイズに相対的単位を使用。

div.fullWidth {
font-size: 1.0em;
width: 100%;
}

参考：google ビューポート設定

サイトを一から構築するなら

1. スマホ優先で内容を吟味する
2. HTMLを作りこむ
3. メタ ビューポートを使用する
4. CSS メディア クエリ でスマホ用、PC用に分けてデザイン

参考：google Web Fundamentals レスポンシブにする