レスポンシブデザインに関するTIPS、メモ | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

レスポンシブデザインに関して勉強したこと、ちょっとした設定方法等を備忘としてメモ書きしてまとめています。

※目次をクリックすると目次の下部にコンテンツが表示されます。

１．レスポンシブデザインでビューポートを設定
２．メディアクエリを使ってレスポンシブデザイン
３．WebサイトでHTTPリクエストの数を最小化するには？
４．img要素のsrcset属性でピクセル密度に応じて画像を選択
５．picture要素を使ってレスポンシブ画像

レスポンシブデザインでビューポートを設定

●ビューポートの概要
　
・最適なエクスペリエンスを提供するために、モバイルブラウザではページをパソコンの画面幅（通常はおよそ980px）でレンダリングしたうえで、フォントサイズを大きくしたりコンテンツを画面に合わせてスケーリングすることで外観の向上を試みる。
　
・ページをさまざまなデバイス向けに最適化するには、ドキュメントのhead部にmeta viewport要素を含める。
　
・meta viewportタグは、ページのサイズとスケーリングの制御方法についてブラウザに指示する。
　
●width=device-width
　
・画面の幅をデバイス非依存ピクセルで合わせるようページに指示が与えられる。
　
これによりさまざまな画面サイズに合わせてページのコンテンツをリフローすることができる。
　
●initial-scale=1
　
・デバイスの向きに関係なくCSSピクセルとデバイス非依存ピクセルとの間に1:1の関係を確立。
　
これにより、横向きにした場合にページ幅全体を利用できるようになる。
　
●minimum-scale、maximum-scale、user-scalable
　
・ユーザーがビューポートをズームできなくなる場合があるため、ユーザー補助関連の問題が生じる可能性があるので注意。
　
●コンテンツのサイズをビューポートに合わせる
　
・ビューポートよりも広い幅で表示される画像があると、ビューポートで横方向へのスクロールが発生。
　
ユーザーが横方向にスクロールしなくて済むよう、このコンテンツをビューポートの幅に収まるよう調整することが必要。
　
・CSSでページ要素のwidthに大きな絶対値を設定すると幅の狭い端末（iPhoneなどの、幅が320CSSピクセルの端末）のビューポートではdivが広くなってしまう。
　
代わりに、width: 100% などの相対的な幅の値を使用する。
　
・同様に、位置指定に大きな絶対値を使用すると、小さい画面では要素がビューポートの外に出てしまう可能性があるため注意が必要。

メディアクエリを使ってレスポンシブデザイン

１）メディアクエリの概要

　
・メディアクエリは、CSSスタイルに適用できるシンプルなフィルタ。
　
・メディアクエリを使用すると、デバイスの種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいてスタイルを容易に変更できるようになる。
　

２）メディアクエリの記述方法

　
下記３つの記述の仕方があるが性能上の理由より①②が推奨。
　
クリティカルパスにラウンドトリップを追加することになるので、③は避けることを推奨。
　
インポートされるCSSリソースは、@importルールのあるCSSスタイルシート自身の取得と解析が完了した後でのみ発見される。
　
①スタイルシートのリンクでmedia属性を使用
　
<link rel=”stylesheet” href=”print.css” media=”print”>
　
②CSSファイル内に@mediaを挿入
　
@media print {
　/* print style sheets go here */
}
　
③CSSファイル内に@importを挿入
　
@import url(print.css) print;
　

３）CSSの優先順位

　
・メディアクエリに適用されるロジックは相互排他的ではないため、マッチしたメディアクエリのCSSは標準の優先ルールに従って適用される。
　

４）ビューポートのサイズに基づいてメディアクエリを適用

　
例）

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>

・ブラウザの幅が0px～640px
max-640px.cssが適用。
　
・ブラウザの幅が500px～600px
@media 内のスタイルが適用。
　
・ブラウザの幅が640px以上
min-640px.cssが適用。
　
・ブラウザの幅の値が高さよりも大きい場合
landscape.cssが適用。
　
・ブラウザの高さの値が幅よりも大きい場合
portrait.cssが適用。
　

５）*-device-width使用時の注意

　
・*-widthはブラウザのウィンドウのサイズに基づくが、*-device-widthは画面のサイズに基づく。
　
一部のブラウザ（古いAndroidブラウザを含む）ではデバイスの幅が正しく通知されず、画面の幅が、予期されるビューポートの幅ではなくデバイスピクセルで通知される場合がある。
　
・*-device-width を使用すると、ウィンドウのサイズ変更が可能なパソコンや他のデバイスでコンテンツが対応できないことがある。
　
これは、クエリがブラウザウィンドウのサイズではなく実際のデバイスのサイズに基づいているため。
　

６）相対的な単位を使用する

　
・サイズに相対的な単位を使用すると、レイアウトをシンプルにできるほか、誤ってビューポートに収まらないコンポーネントを作成することを防止できる。
　
たとえば、トップレベルのdivにwidth: 100%と設定すれば、そのdivの幅は確実にビューポートの幅になるため、ビューポートより大きすぎる（または小さすぎる）ということは生じない。
　
・相対的な単位を使用することで、ブラウザがページに横スクロールバーを追加することなく、ユーザーのズームレベルに基づいてコンテンツを表示できる。

WebサイトでHTTPリクエストの数を最小化するには？

フルードグリッドを使ったレスポンシブWebデザインパターンをサンプルを使って確認します。
　
参考サイト
Mostly fluid | Web Fundamentals – Google Developers
　
●サンプルの仕様
　
１）スクリーン幅800px以上のカラム構成
　
①～⑤の領域があり、１段目に①（60%幅）と②、２段目に③～⑤
　
（イメージ）
①①①①①①①①②②②②
③③③③④④④④⑤⑤⑤⑤

２）スクリーン幅600px以上800px以下のカラム構成
　
①～⑤の領域があり、１段目に①、２段目に②、③、３段目に④、⑤
　
（イメージ）
①①①①①①①①①①①①
②②②②②②③③③③③③
④④④④④④⑤⑤⑤⑤⑤⑤
　
●サンプルコード

<style>
.container {
  margin: 0;
  padding: 0;
  width: 100%;
}

.container div {
  box-sizing: border-box;
  min-height: 150px;
  min-width: 150px;
}

.c1 {
  color: #ddd;
  background-color: #003476;
}

.c2 {
  color: #ddd;
  background-color: #0062d2;
}

.c3 {
  color: #333;
  background-color: #b4d2f7;
}

.c4 {
  color: #333;
  background-color: #d5dfef;
}

.c5 {
  color: #333;
  background-color: #dfe1e5;
}
.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.c1, .c2, .c3, .c4, .c5 {
  width: 100%;
}

@media (min-width: 600px) {
  .c2, .c3, .c4, .c5 {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .c1 {
    width: 60%;
  }
  .c2 {
    width: 40%;
  }
  .c3, .c4, .c5 {
    width: 33.33%;
  }
}

@media (min-width: 800px) {
  .container {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>
<body>
<div class="container" role="main">
  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c3"></div>
  <div class="c4"></div>
  <div class="c5"></div>
</div>
</body>

　
●Bootstrap3を使った類似のサンプル

<div class="container" role="main">
  <div class="row">
    <div class="c1 col-xs-12 col-sm-8"></div>
    <div class="c2 col-xs-6 col-sm-4"></div>
    <div class="c3 col-xs-6 col-sm-4"></div>
    <div class="c4 col-xs-6 col-sm-4"></div>
    <div class="c5 col-xs-6 col-sm-4"></div>
  </div>
</div>

img要素のsrcset属性でピクセル密度に応じて画像を選択

●img要素のsrcset属性
　
・特性の異なる各デバイスに複数の画像ファイルを簡単に配信できる。
　
例）
<img src=”photo.png” srcset=”photo@2x.png 2x,
photo@3x.png 3x”>
　
・高解像度のディスプレイをサポートサポートするには、1x、1.5x、2x、3xといったピクセル密度デスクリプタを使う。
　
・srcset をサポートしていないブラウザでは、src属性に指定されたデフォルトの画像ファイルが使用される。
　
・srcset がサポートされている場合は、カンマ区切りで指定された複数の画像 / 条件のリストの解析後にリクエストが送出され、最適な画像のみがダウンロードされて表示される。

picture要素を使ってレスポンシブ画像

●picture要素の概要
　
・HTML5で追加された新しい機能。
　
・1つの画像のソースが複数の解像度で存在する場合か、レスポンシブデザインで特定の画面タイプに別の画像を表示するよう指示する場合に使用。
　
・デバイスの属性、ビューポート幅、ピクセル密度などが異なる複数のsourceタグを保持するコンテナー要素。
　
・<source>要素を使ってメディアの属性、タイプ、CSSを指定でき、src属性でダウンロードする画像を指定出来る。
　
●サンプル

<picture>
  <source media="(min-width: 640px, min-device-pixel-ratio: 2)" src=" small.jpg ">
  <source media="(min-width: 2048px, min-device-pixel-ratio: 2)" src=" large.jpg ">
</picture>
　
※srcset属性を使用した例　img要素のsrcset属性でピクセル密度に応じて画像を選択
<picture>
  <source srcset="small.jpg 1x, small-2x.jpg 2x" type="image/jpeg" media="(min-width: 40em)" />
  <source srcset="large.jpg 1x, large-2x.jpg 2x" type="image/jpeg" />
</picture>

関連記事の目次

Webデザイン