マルチデバイス対応の基礎知識
レスポンシブ各種TIPS

カフェサイトではできるだけシンプルに作るため、ブレイクポイン卜は1箇所のみで作りましたが、実際にはもう少しブレイクポイントを増やして細かくレイアウト調整することが多いと思われます。例えば480px、640px、940pxの3箇所にブレイクポイントを設けて段階的にレイアウトを変更していくことを想定した場合、モバイルファースト方式とデスクトップファース卜方式ではそれぞれ以下のようにメディアクエリを記述することになります。

メディアクエリで段階的にレイアウト変更する場合のポイン卜は、原則として

①モバイルファースト方式では小さいブレイクポイントから順に、デスクトップファースト方式では大きいブレイクポイン卜から順にメディアクエリを記述する

②モバイルファースト方式では「min-width（～以上）」、デスクトップファース卜方式では「max-width（〜以下）」のメディア特性条件式を使用する

という点です。
このように指定するのは、cssが持っている「スタイルの継承と上書き」という仕組みをうまく活用することで、最小限の記述で、済むようにするためです。基本的に各メディアクエリは「～以上全て」もしくは「～以下全て」という条件分岐で作りますので、複数のブレイクポイン卜がある場合、画面サイズの大きさに応じて順次スタイルが継承されて行くように記述するということに注意してください。

ちなみにメディアクエリの文法としては、

のように、各レイアウト段階で完全にcssを切り分けて他のサイズ用のスタイルの影響を受けないように作ることも可能ではあります。ただしこのやり方の場合、よほどそれぞれが全く別のデザインでもない限りスタイル指定の重複が多く発生し、無駄の多いcssになってしまう恐れが高いのであまりお勧めはできません。
デザインの特性を見極めた上で、部分的にこのような特定の画面サイズ専用のメディアクエリを使用する箇所があるのは構いませんが、基本的には通常のcss同様にスタイルの継承と上書きという仕組みをうまく利用し、最小限の記述でスタイル指定ができるように工夫することが重要です。

レスポンシブウェブデザインでは、ほとんどのサイズ指定をpxではなく%単位で指定しますが、%を算出する際の基準となるサイズが、割り出したいプロパティの種類によって若干異なりますので注意が必要です。

レスポンシブサイトの構築において一番利用頻度の高いwidth / heightの%を算出する際の基準は、「直近親要素のcontent-boxサイズ」です。また、この時widthの基準は「直近親要素のcontent-boxの横幅」、heightの基準は「直近親要素のcontent-boxの縦幅」とそれぞれ基準とするものが異なります。
なお、親要素にbox-sizing:border-box;が指定されていたとしても、基準となるのは常にpadding、 borderを除いた「コンテンツ領域＝content-box」のみのサイズとなります。

marginとpaddingの%を算出する基準も、「直近親要素のcontent-boxサイズ」です（自分自身のサイズは関係ありません）。 親要素にbox-sizing:border-box;が指定されていた時の挙動もwidth / heightと同じです。ただし、左右のmargin / paddingだけでなく、上下のmargin / padding の値も、「直近親要素のcontent-boxの横幅のみ」を基準として算出し、親要素の縦幅は関係ない点に注意が必要です。

position:absolute;で絶対配置する場合に使用するleft / right / top / bottomの%を算出する基準は、「基準ボックスのpadding-boxサイズ」です。「基準ボックス」とは、絶対配置をする要素の座標系の基準として指定された要素で、「position:static;以外の値が指定された直近の先祖要素」が基準ボックスとなります。
絶対配置の座標はborderを除いたボックスの内側の領域（padding含む）を基準として指定する仕様であるため、%指定をする際にもpadding-boxのサイズを基準として算出する必要があります。

レスポンシブ・ウェブデザインでは、原則として全ての環境で同一のHTML構造を使います。しかし、ユーザビリティ向上のためにやむを得ずスマホ向けPC向けそれぞれに対して独自のパーツが必要となることも実際には多くあります。
このような場合、あらかじめブレイクポイン卜ごとにパーツの表示・非表示を切り替えるための専用のclassを用意しておくとコーディングが少し楽になります。

上記のようなスタイルを用意しておけば、スマホレイアウト時だけ表示したいパーツには「class="sp"」、PCレイアウト時だけ表示したいパーツには「class="pc"」とclass指定するだけで後は自動的に指定のブレイクポイン卜で表示非表示を切り替えることができるようになります。
この仕組みを乱用して安易にソースコードの二重管理をすることは避けなければなりませんが、例えば「文章の読みやすさに配慮してPCレイアウトの時だけ任意の句点の後ろに改行を入れたいなどといったケースや、PCとスマホで異なるナビゲーションを表示したいケースのように、どうしても必要な場合には参考にしてみてください。

ここではHTMLとcssだけで対応可能な範囲でのレスポンシブサイト構築を解説しています。しかし実際に作り始めると、どうしてもjQueryプラグインなど、何らかのJavaScriptを使わなければならなくなるごとが多くなってきます。
特に比較的よく使われるスライダー、モーダルウィンドウ、要素の高さ揃え、レスポンシブメニューなどの動的UIをjQueryプラグインで導入する際に気をつけたいことは、「レスポンシブ対応のプラグインを選択する」という点です。数あるjQueryプラグインの全てがレスポンシブに対応しているわけではないため、最初から「レスポンシブ対応」を謳っているものを選んでおかないと無駄に手間取ることになってしまいます。当たり前のことなのですが、案外見落としがちなポイン卜ですので気をつけましょう。

簡単な記述で高度なUIが楽に作れることでデザイナーに人気の高いjQueryですが、IE8以下をサポー卜する「v1.x 系」と、IE9以上のモダンブラウザのみをサポー卜する「v2.x 系」の2系統が存在します。レスポンシブに限らず、jQueryを使う場合にはIE8以下のサポートが必要か否かによってどちらの系統を利用するのか選択する必要がありますので注意しましょう。また、プラグインによっては使えるバージョンや系統が限られていることもありますので、使用するプラグインとの相性も考慮する必要があります。
なお次期バージョンの「jQuery3.0」はIE9以上サポートであるv2.x 系の後継となります。引き続きIE8以下をサポー卜するのは「jQuery Compat3.0」となりますのでこちらも注意してください。

レスポンシブ対応で動作が軽快で安定しており、カスタマイズ性も高いお勧めのプラグインをいくつか紹介しておきます。なお使い方は配布元サイトなどで各自調べるようにしてください。

• スライダー『slick.js』
• モーダル『magnific popup』
• 高さ揃え『match Height』
• レスポンシブメニュー『Mean Menu』

レスポンシプでサイトを構築する際、もしサポート対象にIE8を含めるという話が出た場合は、まず「完全サポー卜」を求めないようにしましょう。固定レイアウトのPC専用サイトであれば最悪古い技術の組み合わせで後方互換性を保つこともできますが、レスポンシブの場合はIE8以下が対応していないメディアクエリなどの最新技術の使用が必須となるため、そもそも後方互換性を保つことが困難な手法だからです。
IE8も今ではかなりシェアも落ちてきていますし、2016年以降はMicrosoftのサポートも切れますので、仮に対応するとしても最小限の労力で最小限の対応のみ行う、という方針とするのが無難です。

基本的にDOCTYPEにはHTML5を使っているでしょうから、まずはHTML5新要素に対応させるためのJavaScript を読ませておきましょう。

またCSS3のセレクタを使用している場合には、

① CSS3セレクタを使わず、CSS2.1セレクタの範囲内で済むように作る

② Selectivzr.jsやIE9.jsなどでCSS3セレクタ機能を補完するスクリプトを読み込む

のどちらかの方法で対処しておくとレイアウト崩れの箇所を少なくできます。

IE9.jsは単体で機能しますが、Selectivzr.jsはjQuery.jsやprototype.jsなどのJavaScriptライブラりと併用する必要があります。

次にIE8でスタイル調整をしやすくするため、IEのバージョンに応じた特定のclassを追加する記述を加えておきます。IEの8と9には特定のclassが付くことになるので、万一IEのバージョンごとにバグ修正などの差分cssを加える必要があった場合、cssハックに頼らずに済むので便利です。

例えばnth-child(3n）などのCSS3 セレクタに非対応のIE8だけ、CSS3セレクタを使わずに3カラムレイアウトできるように調整したいといったような場合に、次のようなシンプルなセレクタで対処できるようになります。

レスポンシブサイトでIE8サポートの必要があるなら、デスクトップファースト方式を採用することを強くお勧めします。
IE8はレスポンシブウェブデザインの要となるメディアクエリの機能に非対応であるため、モバイルファースト方式で作ってしまうとIE8で閲覧した時にスマー卜フォン向けレイアウトとなってしまうからです。デスクトップファースト方式の場合はベースがPC向けの固定レイアウトになりますので、IE8で閲覧した場合には「レスポンシブではない単なるPCサイト」として表示させることができます。IE8はPCでしか動作しませんので、他のブラウザのように「レスポンス」しなくても実害は何もありません。「IE8でも大きくレイアウトが崩れないように」という要望がある場合には費用対効果を考えてこちらの方法をお勧めしておきます。

デスクトップファースト方式にした場合、IE8では固定レイアウトとなりますので、フルードイメージ対応のことは基本的に考えなくても良くなります。ただしIE8ではbackground-sizeが使えませんので、カフェサイトのヘッダー領域で使ったような画面幅いっぱいに拡がる背景画像については対応が必要になるかもしれません。この問題はbackground-sizeが使えないとどうにもならないので、IEでは幅いっぱいに拡大しないことを許容するか、「backgroundSize.js」というjQueryプラグインを利用して対応することになります。

モバイルファースト方式で制作するがどうしてもIE8でもレスポンシブにしたいという場合は、IE8以下でもメディアクエリを使えるようにするためのPolyfillスクリプ卜を使うことで対応させることはできます。代表的なスクリプトは「Respond.js」です。