ResponsiveDesign

レスポンシブデザイン

レスポンシブデザインとは、PC、タブレット、スマートフォンなどの様々なサイズの画面表示に対して、フレキシブルにレイアウトを最適化して表示する手法のことをいいます。

PCとモバイル機器とで、ブラウザの基本仕様が異なっていた時代は、PC用のWebサイトと、モバイル用のWebサイトは、別々にコーディングを行なっていました（ケータイ専用のHTMLも存在していました）。その当時は、PC用のHTMLから情報を削ってケータイ用を作るといった２度手間が必要で、どちらか一方の更新が遅れて混乱するといった問題もありましたが、現在では、HTML（すなわち掲載する情報内容）は１つ（One Source）で、そのビジュアルのみを CSS の切り替えによって各デバイスに最適化するということが可能になりました。

レスポンシブデザインの技術を使うと、ブラウザのウインドウ幅によって表示スタイルが変わります。現在では、この仕様が標準的なものなので、Webサイトの開発においては、ウインドウ幅を広げたり、縮めたりしながら、最適なスタイルが実現されているかを確認するようにしてください。

CONTENTS

• はじめに
• レスポンシブデザインの実現方法
  • HTMLの設計
  • CSSの選別
  • HTML＞head の linkタグに media属性を記述して選別
  • 親CSS において子CSS を @import する際に選別
  • CSS内の @media で書き分ける
• デバイス優先順位とCSSの記載順序
  • レスポンシブデザインにおける優先順位の考え方
  • 記載順序
  • 記載例
• その他
  • ブレイクポイントについて
  • 画面幅ではなく、縦長か横長かで区別する場合
  • 補足
• サンプル
  • 事例１
  • 事例２
  • 参考事例

はじめに

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

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

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

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

この記述は、スマートフォン、タブレット等での表示幅・拡大率等を適正にするための「定番の書き方」とご理解ください。device-width とは「当該機器の画面のピクセル数」を意味するもので、上記のように記載しておけば、375 とか 480 といった具体的な数字を書く必要はありません。

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

一般に、HTML側の meta タグで viewport指定を行うとともに、CSS側のメディアクエリを使って実現します。

HTMLの設計

• はじめに、HTMLファイルの＜head＞内に＜meta＞タグを使って、以下の記述を追加します。

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

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

CSSの選別

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

• 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) デザインが２次元的で複雑になる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) {・・・・・・}

画面幅ではなく、縦長か横長かで区別する場合

縦長か横長かでデザインを分ける場合は、以下のように区別します。

• PC/スマホの横向き指定

  @media only screen and (orientation:landscape) {
     /* 横向き用のスタイル */
  }

  
  
• PC/スマホの縦向き指定

  @media only screen and (orientation:portrait) {
     /* 縦向き用のスタイル */
  }

  
  

補足

• HTMLタグ内に style属性を使ってCSSを書き込んでしまうと、そちらが優先されて、CSSファイルに書かれたメディアクエリーが効きません。原則どおりHTMLとCSSは完全分離で・・。
• スマートフォンからのWebアクセスが PC を上回っています。モバイルフレンドリーなサイトづくりが求められています。
  https://developers.google.com/webmasters/mobile-sites/?hl=ja
• 以下、サイトがモバイル表示に関して適正か否かをチェックできます。
  Googleモバイルフレンドリーテスト
• フォントもロゴもレスポンシブに・・
  Google:レスポンシブ・フォント　Google:レスポンシブ・ロゴ
  
  
  
  

サンプル

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

事例１

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

• DEMO：https://koichi-inoue.github.io/responsive01/
• CODE：https://github.com/koichi-inoue/responsive01

さらに jQuery の slideToggle() を用いたバージョン

• DEMO：https://koichi-inoue.github.io/responsive01_JS/
• CODE：https://github.com/koichi-inoue/responsive01_JS

さらに サブメニュー表示を追加したバージョン

• DEMO：https://koichi-inoue.github.io/responsive03_JS/
• CODE：https://github.com/koichi-inoue/responsive03_JS
  
  

事例２

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

• DEMO：https://koichi-inoue.github.io/responsive02/
• CODE：https://github.com/koichi-inoue/responsive02

さらに jQuery の slideToggle() を用いたバージョン

• DEMO：https://koichi-inoue.github.io/responsive02_JS/
• CODE：https://github.com/koichi-inoue/responsive02_JS

参考事例

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

• DEMO