レスポンシブ ウェブ デザイン の作り方をまとめてみた。
必要条件:ヘッダのメタタグにビューポートを使用する。
メタ ビューポートのコード
<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%;
}
サイトを一から構築するなら
- スマホ優先で内容を吟味する
- HTMLを作りこむ
- メタ ビューポートを使用する
- CSS メディア クエリ でスマホ用、PC用に分けてデザイン
コメントを残す