カテゴリー
未分類

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

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

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

メタ ビューポートのコード
<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 レスポンシブにする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください