PAGES

GUIDE

DATA

レスポンシブデザイン

 
レスポンシブデザインとは、PC、タブレット、スマートフォンなどの様々なサイズの画面表示に対して、フレキシブルにレイアウトを最適化して表示する手法のことをいいます。一般に、HTML側の meta タグで viewport指定を行うとともに、CSS側のメディアクエリを使って実現します。

はじめに

多くのモバイル機器のブラウザは、実際の表示領域幅ではなく、幅が960pxあるものとしてWebページを表示させます。これは、従来のパソコン用のWebページを、そのままのイメージで縮小表示するための仕様です。

しかし、これでは見づらいので、特にスマホなどの小さな画面では、はじめから適正な文字サイズで表示されるよう、表示幅や拡大率などを設定する必要があります。

スマートフォン、タブレット等での表示幅・拡大率等の設定は、HTMLファイルの<head>内に<meta>タグを使って、以下のように記述します。

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

device-width とは「当該機器の画面のピクセル数」を意味するもので、上記のように記載しておけば、375 とか 480 といった具体的な数字を書く必要はありません。よって「この書き方が定番」という認識でよいでしょう。




レスポンシブデザインの実現方法

HTMLの設計

閲覧するデバイスの画面幅に応じてレイアウトを変更できるようにするには、HTMLが柔軟な構造で記述されていることが必要です。かつては情報要素のレイアウトを table タグで行なっていたことがありますが、tableで組んでしまうと、横並びを縦並びに変更したり、上下左右を入れ替えるなどの柔軟なレイアウト変更ができません。
 したがって、CSSの変更のみでレイアウト変更が簡単にできるように HTMLの構造を最適化する必要があります(具体例は後述)。

CSSの選別

デバイスのタイプと特性に応じて、CSSファイルを分けて読ませる、あるいはCSSファイルの中でスタイルを書き分けることが必要です。これには、メディアクエリーという機能を使います。主に以下の3つの方法があります。

  • HTML>head の linkタグに media属性を記述して選別
  • 親CSS において子CSS を @import する際に選別
  • CSS内の @media で書き分ける

参考: CSS/MediaQueries

HTML>head の linkタグに media属性を記述して選別

  • 以下の記述を HTML の link タグで行います。
    <link rel="stylesheet" href="読み込むファイルのパス" media="メディアタイプの指定 and (メディア特性の指定)">
  • 例)640px以下の場合は mobile.css を読み込む
    <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 640px)">

親CSS において子CSS を @import する際に選別

  • CSSを分割・階層化するとともに、以下の記述を親となるCSS ファイルの先頭で行います。
    @import url( '読み込むファイル' ) メディアタイプの指定 and (メディア特性の指定);
  • 記述例)640px以下の場合は mobile.css を読み込む
    @import url('mobile.css') screen and (max-width: 640px);
  • 具体例)規模の大きなサイトのスタイル開発を複数のスタッフで手分けして行うような場合は、以下のように CSS を分割した上で、それらを main.css などにインポートする方法が採用されます。
    main.css
    /* CSS の文字コード */
    @charset "UTF-8";
    /* 共通CSS */
    @import url('base.css') screen; 
    /* Mobileサイズのみに適用 */
    @import url('mobile.css') screen and (max-width: 768px);  
    /* PCサイズのみに適用 */
    @import url('pc.css') screen and (min-width: 769px); 
    /* 当該サイト固有のテーマ(追加のCSS)*/
    @import url('theme.css') screen;
    /* プリンタ出力用のCSS */
    @import url("print.css") print;

CSS内の @media で書き分ける

  • 以下の記述を CSS ファイル内の必要な箇所で行います。
    @media メディアタイプの指定 and (メディア特性の指定) {
        /* 当該デバイス用のスタイル記述 */ 
    }
  • 例)640px以下の場合に、フォントサイズを小さく変更する。
    h1 { 
          :
       font-size : 2rem;
    }
    @media screen and (max-width: 640px) {
       h1 { 
         font-size : 1.2rem;
       }
    }



デバイス優先順位とCSSの記載順序

レスポンシブデザインにおける優先順位の考え方

  • モバイルファースト
    スマートフォンのCSSを基本として、大きな画面での閲覧を例外ケースとして書く方法。基本的にはこちらの方が「上書き」が減って効率は良くなります。
  • PCファースト
    PC用のCSSを基本として、徐々に小さな画面での閲覧に適したCSSへと順に変更点を追記する方法。従来型の情報量の多いPCサイト向け。

記載順序

CSSでは読み込み順にスタイルが適用されていきます。先に読み込まれたスタイルは、後から読み込まれたスタイルによって上書きされるので(つまり後着優先なので)、デバイスに依存しない共通スタイル情報を先行して、デバイスごとの変更部分を後から設定する・・という順番で記述します。
 複数のファイルに書き分けた場合は、後半で読み込んだスタイルが、前半で読み込んだスタイルを上書きします。デバイスごとにCSSを完全に区別して読み込む場合は、それぞれに必要なスタイルをすべて記載する必要がありますが、追加読み込みしていく場合は、変更点のみ記載すればOKです。

一般に、以下のような順序で読み込むようにすると、スタイルの上書きが必要最小限になるので効率的です。

  • 1) デバイスに関係なく、共通するスタイル情報
  • 2) デザインがシンプル(縦に直線的に並ぶ)なモバイル用のスタイル
  • 3) デザインが2次元的で複雑になるPC用のスタイル

記載例
例えば、モバイル用のスタイルを基本として、PCの画面サイズまで広がったら「メニュー(nav ul)を横並び」に、「コンテナ(#container)の幅を60%」に変更する・・といった場合は、以下のように @media を用いて変更部分のみ記載すればOKです。

/* Mobile サイズ(基本) */
nav ul {
    :
   flex-direction: column;
}
main {
    :
   width: 100%;
}

/* PC サイズ */
@media only screen and (min-width: 640px) {  
   nav ul {
       flex-direction: raw;
   }
   main {
       width: 60%;
   }
}


ブレイクポイントについて

デザインを切り替える画面幅のポイントについては、標準的なスマホ、タブレット、PCの画面幅を参考にして決めることになります。最新の情報

時代とともにデバイスのサイズは変わるので、px単位だと、その都度修正が必要になります。文字幅の単位である em を使うのも賢明な手法です。

@media only screen and (max-width: 36em) {・・・・・・}


補足

サンプル

以下に2つの事例を紹介します。見た目と挙動は同じですが、CSSの構成方法に違いがあります。

事例1

ひとつのCSSファイル(style.css)をモバイルファーストで記述しています。PC用のスタイルをソースの後半で @media を使って追加上書きしています。


事例2

CSSファイルを分割読み込みする事例です。HTMLで読み込むのは main.css で、main.css が @import を使ってモバイル用とPC用を読み分けています。


参考事例

メディアクエリーを使わずに Flexbox のみでスマホに対応させることも可能です。以下、サンプルのリンクです。ソースコードについては、ブラウザで「ページのソースを見る」から辿ってご覧下さい。

Last-modified: 2020-02-14 (金) 19:24:19