レスポンシブWebデザイン（1）

概要

これから数回レスポンシブWebデザイン関係の記事を書きます。

この記事では、レスポンシブWebデザイン、メディアクエリ、ブレイクポイント、viewport、確認方法について書きます。

レスポンシブWebデザインとは

レスポンシブWebデザイン（Responsive Web Design）とは、Webサイトにアクセスするデバイス（パソコン、スマートフォンなど）によらず、HTMLソースは一つで、CSS3のメディアクエリ（Media Queries）により、画面サイズなどの基準で、読み込まれたり利用されるCSSを切り替えて表示を変える（例：はてなブログのプロフィールの表示場所を右側・下部に切り替え）デザイン方法です。

レスポンシブWebデザインの他に、ユーザーエージェントというデバイスからWebサイトにアクセスした時のHTTPリクエストのUser-Agentヘッダの内容によりWebサーバーでデバイスを判定して種別毎に異なるHTML、CSSを返す方法や、デバイスにより別々のURLにアクセスしてもらう方法もあります。

はてなブログでは、デフォルトではユーザーエージェントで判別しパソコンとスマートフォンで別のHTMLが使われていますが、各ブログの設定で[ダッシュボード]>[デザイン]>[スマートフォン]>[詳細設定]の[レスポンシブデザイン]にチェックを入れればレスポンシブWebデザインが使われるようになります。はてなブログのテーマはレスポンシブWebデザイン向けではないものが多数派のようです。

GitHub Pagesでは、（多分）HTML、CSS、JavaScriptはデバイスによらず同じものが返されるので、レスポンシブWebデザインにするのがいいと思われます。

メディアクエリ

メディアクエリは、メディアタイプ（Media Type）と、メディア特性（Media Feature）による条件で利用するCSSを選択する方法です。

メディアクエリは次の3通りの指定方法があります。1, 2番目はCSSで、3番目はHTML要素です。これらは並べて複数指定することができます。一つのCSSファイルで済ます場合は1番目の方法を使います（ファイル読み込みの効率からこれが推奨されています）。

@media mediaType and (mediaFeature) {
    /* CSSコード */
}

@import url("my.css") mediaType and (mediaFeature) ;

<link rel="stylesheet" media="mediaType and (mediaFeature)" href="my.css">

メディアクエリ（mediaType and (mediaFeature)）の前に次を付けるとそれぞれの作用があります。メディアクエリを満たす場合をtrue、満たさない場合をfalseと表します。

• only：メディアクエリに対応していない古いブラウザからスタイルシートを隠す（よく分かりません）
• not：メディアクエリの否定（true, falseをそれぞれfalse, trueにする）

複数のメディアクエリ（mediaType and (mediaFeature)）を次で区切るとそれぞれの作用があります。

• ,：どちらかのメディアクエリがtrueなら全体がtrue、そうでなければfalse
• and：両方のメディアクエリがtrueなら全体がtrue、そうでなければfalse

メディアタイプ

主なメディアタイプは次のものです。メディアタイプを省略した場合はallと認識されます。

• all：全てのデバイスを表す
• screen：パソコン・タブレット・スマートフォンを表す
• print：プリンターや印刷プレビューを表す

メディア特性

主なメディア特性は次のものです。

• orientation：デバイスがlandscape（横置き）かportrait（縦置き）かを指示
• height, width：ブラウザ等の描画域の高さ, 幅を記述
• -webkit-device-pixel-ratio：WebKit系、デバイスのピクセル密度（1ピクセルを何ドットで表すか）を指示
• resolution：W3Cの仕様（Firefoxなど）、デバイスの解像度（ピクセル密度）を指示、単位はdpi(dot per inch), dpcm(dot per cm), dppx(dot per px)

dppx単位は-webkit-device-pixel-ratioと同じ値になります。また、ピクセル密度は小数値になることもあります。

height, width, -webkit-device-pixel-ratio, resolutionには、前置詞min-, max-付きのものがあり、それぞれ以上, 以下を表します（少々分かり難いですが）。ただし、-webkit-device-pixel-ratioは、-webkit-max-device-pixel-ratio、-webkit-min-device-pixel-ratioとなります。

device-height、device-widthは利用しないことを推奨されています（参照：CSS メディア クエリを使用してレスポンシブにする - Web Fundamentalsのmin-device-widthについての注意）。

また、width, heightは、物理的ドット数をピクセル密度で割った値になります。例えばRetina DisplayであるiPhone 5cの物理的ドット数は640px × 1136pxですが、-webkit-device-pixel-ratioが2なのでwidth=320px, height=568px（ブラウザの枠の分小さい値）になります（iPhone 6 Plusは例外的に1割ほど値がずれます）。

この基準になるwidthなどのメディア特性の値をブレイクポイントと言います。

ピクセル密度のメディア特性は次のように-webkit-device-pixel-ratioとresolutionの両方を指定するのが良いようです。

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  /* CSS */
}

次のページでブラウザの画面サイズやピクセル密度を表示できます。

• Device pixel density tests - Bjango
• Screen size tests - QuirksMode

メディアクエリのよくある使い方

メディアクエリの利用方法を見ると、CSSファイルの大部分でパソコン[スマートフォン]用の設定を行い、最後にメディアクエリを指定してスマートフォン[パソコン]用のCSSを指定して上書きするものが多いです。

ブレイクポイント

メディアクエリでCSS切り替えの基準となる値であるブレイクポイントは、レスポンシブデザインのウインドウサイズの切替えについてまとめてみました：アシアルブログによると、縦向きでは768px、横向きでは960pxがスマートフォンとタブレットのブレイクポイントに良さそうです（これは2012年の記事ですが以後発達したピクセル密度はwidth, heightに余り影響しないので今でも通用すると考えられます）。

ちなみに、Hatena-Blog-Themes/boilerplate/less/_media-queries.lessは次のようになっています。

/* Media Queries - Retina Display */
@media (-webkit-min-device-pixel-ratio: 2) {
  /* CSS */
}

/* Media Queries - Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  /* CSS */
}

/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 767px) {
  /* CSS */
}

/* Media Queries - Smartphone */
@media (max-width: 480px) {
  /* CSS */
}

はてなブログについてはいずれ詳しく調べる予定です。

viewport

スマートフォンやタブレットはデフォルトでは幅が980pxとして描画されるそうです（メディアクエリのwidthは確かにそのように動作しているようです。JavaScriptのscreen.widthの値は物理的ドット数をピクセル密度で割った値になっているようです）。

レスポンシブWebデザインを行う場合はこれはまずいので、次のように、HTMLのmeta要素のname属性にviewportを指定し、content属性に設定値を記述します。,区切りで複数の値を指定できます。

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

content属性の設定値には、表示領域の幅・高さ、初期のズーム倍率、ズーム倍率の最大・最小、ズーム操作の可否の項目があります。次のページを見てください。

• meta要素 表示領域を設定する - TAG index Webサイト

はてなブログでは、テーマのCSSの先頭に、Responsive: yesという行を含んだコメントがあればHTMLのヘッダーに次の要素が出力されます（参照：はてなブログテーマ制作の手引き - はてなブログ ヘルプのレスポンシブデザインのテーマを作成するには）。

<meta name="viewport" content="width=device-width">

これは、表示領域の幅をデバイスの幅に合わせる設定です。

Jekyllのサイトは次のようになっています。

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

これは、表示領域の幅をデバイスの幅に合わせ、初期のズーム倍率を1にする設定です。

ゲームは大抵次のようにズーム操作ができないようにされています。widthが固定値のこともあります。

<meta name="viewport" content="width=device-width, user-scalable=no">

ChromeブラウザのデベロッパーツールのDevice Modeによる確認

Chromeブラウザのデベロッパーツールを起動（[option]+[command]+[i]キーやメニューから）して、虫眼鏡と[Elements]の間にあるスマートフォンのアイコンをクリックするとDevice ModeになりiPhoneやAndroidのブラウザをエミュレートできます（再クリックで元に戻ります）。

Device pixel density tests - Bjangoにアクセスした表示例です。

理系ジンが確認したところ実際のデバイスとは少々動作が違うようです（特に、<meta name="viewport" content="width=device-width">が設定されてなくても設定されているような動作をします）。

参考資料

メディアクエリ

• メディアクエリ - MDN
• @import - MDN
• @media - MDN
• メディアタイプ - HTMLクイックリファレンス
• @ルール（@で始まる書式） - HTMLクイックリファレンス
• いまさら聞けないRetina対応のための「ピクセル」の話 - Rriver
• WebページをRetina対応させるテクニック～基礎知識編 - @IT
• CSS メディア クエリを使用してレスポンシブにする - Web Fundamentals
• Safari CSS Reference: Supported CSS Rules

ブレイクポイント

• レスポンシブデザインのウインドウサイズの切替えについてまとめてみました：アシアルブログ
• hatena/Hatena-Blog-Themes

viewport

• meta要素 表示領域を設定する - TAG index Webサイト
• これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ
• はてなブログテーマ制作の手引き - はてなブログ ヘルプ
• Jekyll

ChromeブラウザのデベロッパーツールのDevice Mode

• Chrome 38からDevToolsに搭載されるレスポンシブ表示確認ツール「Device Mode」が良さげ - Rriver
• Device pixel density tests - Bjango
• Screen size tests - QuirksMode

予定

今後しばらくの記事の予定は次のようになっています。

• レスポンシブWebデザイン（2）：レイアウト
• レスポンシブWebデザイン（3）：画像、Webフォント、CSS Sprite、SVG、Canvasの扱い方
• less
• Webページ情報取得
• はてなブログ分析
• はてなブログテーマ作成
• Metalsmithの調査

これ以降は状況により変わります。