LogoMark.png

ResponsiveDesign

レスポンシブデザイン


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

CONTENTS


はじめに

多くのモバイル機器のブラウザは、実際の表示領域幅ではなく、幅が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つの方法があります。

参考: CSS/MediaQueries

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

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

CSS内の @media で書き分ける

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

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

記載順序

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

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

記載例

例えば、モバイル用のスタイルを基本として、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 のみでスマホに対応させることも可能です。以下、サンプルのリンクです。ソースコードについては、ブラウザで「ページのソースを見る」から辿ってご覧下さい。

PAGES

GUIDE

DATA

Last-modified: 2020-02-28 (金) 12:21:07