2

レスポンシブWebデザインを基本から!

 レスポンシブWebデザインを基本的なことから

今更ではありますが、2012年頃からWeb業界で話題になっているレスポンシブWebデザイン、スマートフォンの普及率が急速に拡大したこともあり、2014年現在では数多くのコーポレートサイトや個人サイトなどで広く取り扱われてきています。レスポンシブWebデザインという言葉自体は当たり前のように耳にしてきましたが、いつか余裕が出来たら取り掛かろうと先延ばしにしてきた現実にムチを打って、ここでひとつ基礎をまとめていきたいと思います。

レスポンシブWebデザインってなに?

2010年5月25日に、米国のマサチューセッツ州のEthan Marcotte(イーサン・マルコッテ)氏が「A List Apart」で紹介した制作手法です。

PCやスマートフォン、タブレットごとに複数のデザインやHTMLを制作するのではなく、ディスプレイの幅に合わせてデザインを最適化する方法。簡単に言ってしまえば、ひとつのHTMLソースでマルチデバイスに対応する手法です。このレスポンシブWebデザインでは、CSS3のMedia Queries(メディアクエリ)を利用することによりデバイス幅を認識し、ディスプレイサイズに応じてCSSを切り替えて表示するようにします。

どのようなディスプレイサイズで表示させるのか?

前述の通り、レスポンシブWebデザインでは、Media Queriesというものを利用して、いくつかの異なるウィンドウサイズに応じてCSSをそれぞれ適応させることでデザインレイアウトを変更していきますが、では実際にどのようなウィンドウサイズで切り替える必要があるのかを考えていきます。

▼主なデバイスのディスプレイサイズは以下の通りです。

■ Desktop

PC/iPad(ランドスケープ)…1024px
Android(ランドスケープ)…800px

■ Tablet

iPad(ポートレート)…768px

■ スマートフォン

Android(ポートレート)…480px
iPhone(ランドスケープ)…480px
iPhone(ポートレート)…320px

細かく分類すれば限がありませんが、大きく分けると上記の3分類になっていると思います。
そのような現状から、切り替えるディスプレイサイズの境目(これをブレイクポイントと呼びます。)は以下の3つに設定されている場合が多いでしょう。

  • 480px以下(スマートフォン)
  • 481px以上~768px未満(タブレット)
  • 768px以上(PC)

やはり、iPhoneやiPadを基準にして考えるケースが一般的とされています。

どのようにデザインレイアウトを考えるべきか?

各デバイス用のレイアウト設計は、作り込むことはせずにワイヤーフレーム程度に留めておいた方が良いでしょう。そして、各デバイスごとに、配置する位置、大きさ、コンテンツをしっかりと決めておきます。すべてのデバイスで同じ機能やコンテンツが必要であるケースは少ないと考えられますので、それぞれのデバイスをどのような環境下で使用されるかなどを想定したコンテンツ選択や配置を設計していきます。

レスポンシブWebデザインに必要不可欠な考え方3つ

1.フルードグリッド(Fluid Grid)

 flued-sample1

flued-sample2

フルードグリードとは、例えばデバイス幅が1024pxのPCでサイトを見た場合に2カラムであるものを、480pxのiPhoneで見た場合に、1カラムに切り替えて表示させることを言います。

flued-sample3

fluid-sample4

また、グリッドの幅を相対値で指定していきます。
相対値の求め方は、求める要素の幅÷親要素の幅×100%

fluid-sample5

2.フルードイメージ(Fluid Image)

・画像を可変形式にする必要があります。

fluid-sample6

 fluid-sample7

 3.メディアクエリ(Media Queries)

 「メディアがスクリーンであり、デバイス幅が769px以上の場合bodyの背景色をグレーにする。」という意味になります。

★ メディアクエリによるCSSの振り分け方

link要素のmedia属性で指定する場合

◆ CSS内で@importで指定する場合

◆ CSS内で@mediaで指定する場合

 モバイルファーストという考え方

スタイルシートを記述していく際には、モバイル端末(スマートフォン)を優先的に考えた記述をしていくようにします。そのことを「モバイルファースト」と言いますが、なぜそのようにするかというとモバイルを優先にCSSを記述していくことにより記述しなければならない項目が格段に少なくなり無駄なく指定が可能になります。

▼ すべてのデバイス共通

fluid-sample8

▼ デバイス幅が480px以上は個別指定

fluid-sample9

▼ デバイス幅が480px以上、768px以上はそれぞれ個別指定

fluid-sample10

 viewposrt設定について

viewportとは、ブラウザのウィンドウサイズに該当する概念です。
例えば、iPhoneのviewport値は980pxなので、何も設定しない場合幅980pxのウィンドウサイズでアクセスしている状態になります。スマートフォン用に、smartphone.cssなどを用意してメディアクエリで分岐させていてもviewport設定をしていないと適用されないので注意しましょう。

▼ viewport設定の仕方は以下の通りです。

 ▼ プロパティの内容には以下のようなものがあります。

width viewportの横幅
height viewportの縦幅
initia-scalel 倍率の初期化
minimum-scale 最小倍率
maximum-scale 最大倍率
user-scalable ズーム操作の可否

一般的には、デバイスサイズの「width=device-width」で設定すると覚えておけば良いと思います。

ここまでで基本の考え方をざ~っと流してきましたが、レスポンシブWebデザインにはいくつかの注意点があります。内容についてはまた別記事で記載していきます。




2 Comments

  1. 凡ミスと思いますが
    「2.フルードイメージ(Fluid Image) 」のところにある
    max-midtth: 100%; というのが気になりました。

    • 「Morry」さん
      コメントありがとうございます。
      単純な凡ミスでした…。お恥ずかしい限りです。。。
      的確なご指摘ありがとうございました!

コメントを残す

mororeco > HTML > レスポンシブWebデザインを基本から!