マルチデバイス対応 - レスポンシブWebデザイン

マルチデバイス

f:id:hak00810:20200513155250p:plain
現在、Webページは様々なデバイスで閲覧されています。ここでのデバイスとは、パソコン、スマートフォンやタブレットなどのモバイルなどを指します。
特にスマートフォンは画面が小さいため、パソコン用のデザインをそのまま閲覧しようとすると、画像や文字が小さいためズームやピンチなどの操作をします。この操作が多いほどユーザーのストレスになり、ページの離脱に繋がります。そのため、デバイスごとに最適な見栄えを意識しなければならなくなりました。

＜参照＞

Googleデベロッパーガイド＞サイトをモバイル対応にする

developers.google.com

レスポンシブWebデザイン

ブラウザのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと。
CSS内で、複数のデバイスに対応させていきます。

＜デメリット＞

CSSの記述が複雑
無駄な処理が生じる恐れあり。
PCサイトに切り替えられない。

３つの技術的な要素で構成

1. Fluid Grid（フルードグリッド）

以下２つを合わせたもののことを指します。

Grid Design（グリッドデザイン）：Webページの要素を罫線や升目に沿って配置するデザイン
Fluid Design（フルードデザイン）：ブラウザーの横幅が変わってもレイアウトを維持したまま要素のサイズを調整するデザイン

レスポンシブWebデザインでは、最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更します。

2. Fluid Image（フルードイメージ）

画像のサイズが、レイアウトの大きさに準じて拡大・縮小する手法のことです。CSSでのみ実装できます。

Fluid=流動的な=ブラウザの横幅が変化しても、指定したレイアウトを維持したまま要素のサイズが拡大・縮小します。

3. Media Queries（メディアクエリ）

画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術です。
レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替えます。

ブレイクポイント：デバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。

HTMLのhead内にビューポートを設置

<head>
〜
<meta name="viewport" content="width=device-width">
〜
</head>

設定しない場合は、デフォルトの「980px」に設定されます。
デスクトップ（パソコン）の場合、「width」はブラウザの横幅、「device-width」はモニタの画面解像度
スマートフォン、タブレットの場合、「width」はビューポートの横幅、「device-width」はOSによって処理が変化

CSSにメディアクエリを設置

ブレイクポイントに決まった数値はないので、そのとき多く使用されているデバイスに準じます。

ケース１

デバイス	width
デスクトップ/パソコン（PC）	768px以上
タブレット（TB）	768px
スマートフォン（SP）	480px / 568pxなど

※「768px以上」はPC用、「767px以下」はモバイル用のCSSに切り替えます。（PC用のデザインは、画面の横幅がNexus7の600px以下になるとメニューの配置が崩れたり、読みづらくなるため）

ケース２

デバイス	width
デスクトップ/パソコン（PC）	960px以上
タブレット（TB）	768〜959px
スマートフォン（SP）	767px以下

マルチデバイスの場合

＜CSS＞

@charset "UTF-8";

/* reset */
〜

/* 767pxより上のPC用表示を記述 */
〜

/* 767px以下のTB用表示を記述 */
@media screen and (max-width: 767px) {
  〜
}

/* 480px以下のSP用表示を記述 */
@media screen and (max-width: 480px) {
  〜
}

モバイルファーストの場合

＜CSS＞

@charset "UTF-8";

/* reset */
〜

/* 480px未満のSP用表示を記述 */
〜

/* 480px以上のTB用表示を記述 */
@media screen and (min-width: 480px) {
  〜
}

/* 768px以上のPC用表示を記述 */
@media screen and (min-width: 768px) {
  〜
}

画像がある場合の設定

主にスマートフォンのメディアクエリ内に追加します。
＜CSS＞

img {
  max-width: 100%;
  height: auto;
}

フォントサイズの設定

スマートフォンはremを使用します。
HTMLで使用している要素のみを記述します。

マルチデバイスの場合

＜CSS＞

@charset "UTF-8";
/* reset */
〜

/* body */
body {
  font-size: 16px;
}

@media only screen and (max-width: 480px) {
  〜
  /* font-size */
  html { font-size: 62.5% }/* ≒16px */
  h1 { font-size: 3.2rem }/* ≒32px */
  h2 { font-size: 2.8rem }/* ≒28px */ 
  h3 { font-size: 2.4rem }/* ≒24px */
  h4 { font-size: 2.0rem }/* ≒20px */
  p { font-size: 1.6rem }/* ≒16px */
  〜
}

モバイルファーストの場合

＜CSS＞

@charset "UTF-8";

/* reset */
〜

/* html */
html {
  font-size: 62.5%;
}

/* body */
body {
  font-size: 1.6rem;
}
〜

/* 480px以上のTB用表示を記述 */
@media screen and (min-width: 480px) {
  〜
}

/* 768px以上のPC用表示を記述 */
@media screen and (min-width: 768px) {
  html {
    font-size: 100%;
/* あまりないケースですが、レスポンシブ化されていないWebサイト（PC表示のみ作成）をモバイルファーストにする場合、上の62.5%を100％にリセットして、各要素の既存フォントサイズを記述します。 */
  }
  body {
    font-size: 16px;
  }
}

モバイルフレンドリーテストでチェック

制作したWebサイトがマルチデバイス対応しているかをチェックできます。
search.google.com

ポイント

ビューポートの設置
コンテンツの横幅が画面の横幅を超えないように
テキストが小さすぎないように（可読性）
隣り合うリンクが近すぎないように（指でタップすることを念頭に置く）
マルチデバイスに対応したプラグインを使用する

メディアクエリ内の記述の注意点

メディアクエリの上に記述したものをデフォルトに戻したい（解除/リセット）場合は、デフォルトに戻す記述が必要です。
ショートハンドとそうでないものは、各々対応したもので記述します。

＜よく使用するデフォルト＞

background: #AAA;　▶︎　background: none;
border: 1px solid #CCC;　▶︎　border: none;
margin: 5px;　▶︎　margin: 0;
margin-left: 5px;　▶︎　margin-left: 0;
text-align: center;　▶︎　text-align: left;
position: absolute;　▶︎　position: static;
float: left;　▶︎　float: none;
display: flex;　▶︎　display: block;
max-width: 999px;　▶︎　max-width: initial;
max-height: 999px;　▶︎　max-height: auto;

＜参考サイト＞

odnax.hatenablog.com
odnax.hatenablog.com
odnax.hatenablog.com
odnax.hatenablog.com
yachin29.hatenablog.com