レスポンシブデザインとは？

「レスポンシブデザイン」とは、閲覧ユーザーが使用するデバイスの画面サイズに合わせて表示するコンテンツのレイアウトを調整し最適化するデザインのことをいいます。

ユーザーの多くはPC画面からコンテンツを閲覧していましたが、現在ではスマートフォン・タブレット・PCなど、ユーザーの使用するデバイスが画面サイズの異なるものに変化しています。

例えば、全体要素の幅を固定したサイトを作成した場合、それより画面幅が狭くなると、コンテンツの一部が隠れてしまったりしてスムーズな閲覧や操作を妨げることになります。そのためレイアウトがそれぞれの異なる画面サイズに適したものに対応することが必要となってきました。

レスポンシブデザインを適用することで、画面のサイズに合わせて最適なレイアウトを組めるようになり、様々な環境で快適な閲覧環境を実現できるようになります。

レスポンシブデザインを実現するために「メディアクエリ(Media Queries)」という技術を理解する必要があります。

メディアクエリとは？

もともとデバイスの種類に応じて適用スタイルを切り替えられる「メディアタイプ（Media Type）」という仕組みがあり、それを拡張して画面サイズなどの閲覧環境に応じた細かな条件で適用スタイルを切り替えられるCSSの機能のことをメディアクエリといいます。

メディアクエリを使うことにより、同一のHTMLに対して、閲覧ユーザーが利用しているデバイス（PCやスマホなど）の画面幅などを基準にして適用するスタイルを変更する細かな調整ができるようになります。

基本の記述方法は、次の通りです。

メディアタイプ and (メディア特性)

メディアタイプ（media type）とは

メディアタイプとは「デバイスの種類」のことで、「どのメディアのときにCSSを適用させるか」を指定するものです。

指定できるメディアは以下のものが推奨されています。

メディアタイプにすべてのデバイス「all」を指定するときはメディア種別は省略可能です。

メディア特性

メディア特性とは、画面の高さや幅を指定する条件のことです。メディア特性の種類を以下のようなものがあります。

上記以外にもメディア特性には数多くの種類がありますが、レスポンシブデザインの導入によってスマホ対応するためには「width（ビューポートの横幅）」を使用します。

「ビューポート（viewport）」とは「表示領域」のことで、PCではブラウザの表示領域を指し、スマートフォンなどの携帯端末ではデバイス画面領域を指します。

レスポンシブデザインを作成する上で最も重要なデザイン要素はデザイン幅です。つまりレスポンシブデザインとってビューポートの幅が最も重要な特性となるわけです。レスポンシブデザインはビューポートが特定の幅よりも広い場合、または狭い場合にCSSを適用することによって実現しているのです。

メディアクエリの指定方法

レスポンシブデザインのために画面（ビューポートの）幅によって適用するスタイルを切り替えていくための具体的な記述方法についてみていきましょう。

メディアクエリの指定方法にはHTMLにlink要素を使って記述する方法と、CSSに「@media」を使って記述する2つの方法があります。

HTMLにlink要素で指定する

HTMLに記述する場合、head要素内にlink要素のmedia属性を使って指定します。これはメディアクエリで指定する条件によって、読み込むCSSファイルを切り替えていることになります。

次の例は、画面のサイズ（ビューポートのピクセル数）に応じて読み込むCSSファイルを切り替えています。

<link rel="stylesheet" href="sp.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="pc.css" media="screen and (min-width: 768px)">

上記の例では、次のように読み込むCSSが切り替わります。
画面（ビューポートの）幅（width）が767px以下の場合には「sp.css」（スマートフォン用スタイル）が、画面（ビューポートの）幅（width）が768px以上の場合には「pc.css」（PC用スタイル）が読み込まれます。

CSS内で@mediaに記述する場合

CSSでは@mediaにより、スタイルシートを適用する条件を指定することができます。@mediaを使ってCSSソース内に記述することで、すべてのスタイルを1つのCSSソース内に含めておけるため、適用するデバイスごとにCSSファイルを分けておく必要はありません。

次の例は、画面のサイズ（ビューポートのピクセル数）に応じて適用するCSSファイルを切り替えています。

@media screen and (max-width: 767px) {
    /* 横幅が767px以下の場合に適用するスタイル */
}
@media screen and (min-width: 768px) {
    /* 画面幅が768px以上の場合に適用するスタイル */
}

具体的な実装について見てみましょう。

指定方法は「モバイルファースト」と呼ばれる方法と「デスクトップ（PC）ファースト」と呼ばれるものがあります。

モバイルファーストでは、最初にすべての場合に適用する共通スタイルを用意しておきます。これは画面幅の小さいスマートフォンなどを前提にしたスタイルになります。これに画面幅が広くなるにつれてのさらにスタイルを追加し、前述のスタイルを上書きしていくことで幅の広い画面サイズに対応していきます。

次のCSSコードは、モバイルファーストでスタイルを指定している例です。

/* @media以外の所は全てのサイズで適用 */
p {
    background-color: #cccccc;
    color: #ffffff;
}
@media screen and (min-width:480px) {
    /* 画面サイズが480pxから適用 */
    p {
        background-color:#999999;
    }
}
@media screen and (min-width:768px) {
    /* 画面サイズが768pxから適用 */
    p {
        background-color:#666666;
    }
}
@media screen and (min-width:1024px) {
    /* 画面サイズが1024px以上に適用 */
    p {
        background-color:#333333;
    }
}

viewport（ビューポート）の設定

また、このメディアクエリはviewportがあってはじめて機能します。レスポンシブデザインを適用するためにhead要素内に以下のmeta要素を必ず記述してください。このviewport設定しないと、スマートフォンやタブレットでの閲覧時にメディアクエリが正しく機能しませんので注意してください。
viewportはmeta要素のname属性値で指定します。

<meta name="viewport" content="width=device-width,initial-scale=1">

「width=device-width」は、表示領域の幅をPCやスマホなどの標示端末の画面幅（デバイス幅）に合わせています。また、「initial-scale=1」は初期のズーム倍率を表し、1と設定することで初めに表示された時に拡大縮小が起こらないようにします。