01 導入と基本設定
マルチデバイス対応の必要性
Webページを閲覧するデバイスは、PC以外にもスマートフォンやタブレットなどさまざまです。これらは、画面サイズやブラウザにも違いがあるため、PCでの閲覧のみを想定したWebページだと、ユーザーによっては不便だと感じるかもしれません。下の画像を見比べてみると、よくわかるでしょう。本書の現時点でのサンプルデータはまだマルチデバイスに対応していないので左側のようになりますが、スマートフォンに対応すると右の画像のようになります。
POINT
マルチデバイス対応は、ユーザーにとってだけでなくSEO対策を考えるエンジニアにとっても大きな意味を持つ作業です。たとえば、Googleではスマートフォン対応をしていないWebサイトは検索順位が落ちる傾向があるといわれています。今や、あらゆる意味でスマートフォン対応が必須事項となっているのです。マルチデバイス対応の種類
さっそく、マルチデバイス対応の具体的な方法について学んでいきます。本節では、特によく使われる2 つの手法を取り上げます。
・対応方法(1) 端末ごとに専用のページを個別構築する
最適な表示のWebページを端末ごとに用意しておき、アクセスがあるごとにその端末に応じたWebページを選んで表示する方法です。たとえばPCでアクセスした場合はPC用のページ、スマートフォンでアクセスした場合はスマートフォン用のページ、というように、ユーザーのアクセスデバイスを解析して表示を分けます。この場合、ソースコードはPC用とスマートフォン用の2種類が存在しています。
・対応方法(2) レスポンシブコーディングで実装する
もう1つは、レスポンシブコーディングと呼ばれる方法です。これは、HTMLとCSSにレスポンシブ対応専用のコードを組んでおき、アクセスデバイスの画面幅の値に応じてレイアウトを使い分ける方法です。適応させるデバイスをまとめてCSSに書いておくことで、このような使い分けが可能になります。
たとえば1280px以上のデバイス向けの画面表示はソースの100行目から150行目に記述、480px以下のデバイス向けの画面表示はまた別の行に記述……という具合に設定していくため、あらかじめ用意しておくソースは1種類のみです。
次に、これら2つの方法のメリットとデメリットを比較してみましょう。対応方法(1)では対象となるデバイスが増えるたびに新しくページを作る必要があります。その分メンテナンス作業にも時間がかかります。その点、対応方法(2)であれば全体の作業量自体は少なくなりますが、場合によっては構築にあたって専門知識が要求されます。また、どんなデザインでもレスポンシブにできるわけではないので、画面設計にも気を配る必要があります。
POINT
メンテナンス性を重視するのであればレスポンシブ対応、レスポンシブ対応ができない場合に限り端末ごとに専用ページを構築するのがよいでしょう。02 レスポンシブコーディングの仕組み
レスポンシブコーディングの具体例
実装に取り掛かる前に、まずはレスポンシブコーディングがどのような仕組みか理解しましょう。レスポンシブコーディングではHTMLとCSSに「画面幅が◯◯px以上の場合はPC向けのレイアウトを表示すること」という命令を組み込みます。すると下の画像のように、画面幅の変化に伴い見た目が変化するというわけです。PC向けの表示、タブレット向けの表示、スマートフォン向けの表示と、いずれも無理なく閲覧できるように要素が配置されています。
ポイントとなる2つの基本テクニック
レスポンシブコーディングを実装するための2つの基本テクニックがあります。1つ目はHTML側にほどこすviewport設定、2つ目はCSS側にほどこすメディアクエリの設定です。新しく出てきた用語の意味とともに、それぞれ詳しく見ていきましょう。レスポンシブコーディングを行う場合、この2つのテクニックはどちらも必須です。
(1)viewport 設定画面の表示領域をデバイスに応じて調整するよう設定
meta name="viewport" content="width=device-width,initial-scale=1"
レスポンシブ対応で実装を行うときは、まずHTML側にmetaタグを使ってviewport（ビューポート）の設定を行います。viewportとは、いわば仮のウィンドウのことだと考えてください。任意の値を入れると、ウィンドウの幅もその値を反映します。つまり、viewportを設定すると、画面の表示領域をデバイス幅に応じて自動で調整してくれるようになるために、デバイスに応じた表示領域が設定できるというわけです。
(2)メディアクエリを使った各デバイス用のCSS を使い分けする
メディアクエリとは、閲覧するデバイスによってCSSを使い分けることができるCSS3の機能です。レスポンシブコーディングにあたって要となる機能なので、しっかり使いかたをマスターしましょう。メディアクエリを設定するには、下のようなコードをCSSファイルに記述し、画面幅に応じた画像表示方法を指定します。
@media screen and(max-width: 480px) {
img {
border: 0;
}
}
@media screen and(min-width: 1280px) {
img {
border: 1px solid red;
}
}
上記のコードでは「幅480px以下のデバイスではimg要素の境界線を0にする」、「幅1280px以上のデバイスではimg 要素に幅1pxの赤い境界線を出す」という使い分けを指示しています。
出し分けの分岐点「ブレイクポイント」の設定
メディアクエリを使ってデバイスごとにCSSを使い分けるとき、その分岐点となる数字をブレイクポイントと呼びます。レスポンシブコーディングでブレイクポイントの決定は必須です。具体的な数値は下の図を参考にしてください。これらは基準の数値になります。
先ほどの例文では「maxwidth:480px」や「min-width:1280px」という数値がブレイクポイントです。「maxwifth:480px」はスマートフォンの縦表示、「min-width:1280px」はPC（大型）の条件定義となります。先ほどのコードでは「横幅480px以下のデバイスではimg要素の境界線を0にする」、「横幅1280px以上のデバイスではimg要素に幅1pxの赤い境界線を出す」という使い分けを指示しています。
ATTENTION
既存のPCサイトのレスポンシブ化を行う場合、positionプロパティによる絶対配置を行ったコンテンツの有無は必ず確認するようにしましょう。絶対配置はデバイス幅の確保が前提になるケースがありますが、スマートフォンはPCほど幅が大きくないためデザインが再現できなくなるケースがあります。そういった場合、装飾目的のコンテンツであればスマートフォン表示時には非表示にし、必須内容の場合は絶対配置を使わないスマートフォン向けデザインを新たに考えるなど工夫が必要です。もちろん工数も通常以上にかかるので、クライアントがいる場合は工数や対応費用について相談しておくことが多いです。メディアクエリの基本構文と記述方法
続いて、メディアクエリの基本構文の書き方を学んでいきましょう。メディアクエリを記述する際は、まず@media screen and(maxwidth:もしくはminwidth:)と書き、その後にブレイクポイントとなる画面幅の数値を記載します。下のコードであればmax-width:480pxなので、480px以下の画面幅、つまりスマートフォンで表示された場合と指示しています。
メディアクエリの記述方法は、デスクトップファーストとモバイルファーストの2種類あります。2つの違いは、どのデバイスを基本とするかです。基本とするデバイスによって、メディアクエリの記述方法やCSSの記述順が異なります。
次の2つの図は、それぞれCSSの構造を表した図です。図全体が1つのCSSファイルだと考えてください。ファイルの先頭には、ベースとなるCSSを記述します。
デスクトップファーストは、PC向けのCSSが先頭です。ほかのデバイス向けのCSSは、PC向けCSSの下にタブレット用、スマホ用と固めて記述していきます。こうすると、画面横幅が960px以下、もしくは480px以下になった場合に、メディアクエリ内のCSSがPC向けCSSを上書きして適用されます。これでPC用CSS（と共通CSS）を踏襲しながら、デバイス向けに切り替えなければいけないCSSに対しては各デバイス向けCSSが適用されるようになります。
それでは、次の節から練習用Webページをレスポンシブ化していきます。この時点ではまだマルチメディア対応していないので、スマートフォンで表示すると左の画面のようになってしまいます。
右の画面はスマートフォン向けに表示調整をした様子で、ポイントはコンテンツの並び方です。スマートフォンの左右幅はPCより狭いため、PC 版のように幅を大きく使う見せかたはできません。たとえば練習用WebページのTOPICSコンテンツでは、3つのコンテンツを横並びで表示していますが、スマートフォンでこのまま表示してしまうとコンテンツの表示が小さすぎます。特に文字が潰れて小さくなってしまうので、親切な表示とはいえません。
そのためスマートフォンでの表示時には、このようにコンテンツが縦一直線に並ぶようデザインします。コンテンツの並び方はHTMLで記述した順で、かつCSSで設定した横並びを解除するイメージだと考えてください。横並びを解除すればコンテンツを幅いっぱいに表示でき、適切な文字サイズになります。
スマートフォン向けデザインの確認
完成は以下のようなイメージです。最終的にどのようなものになるのか、あらかじめ確認しておきましょう。
コーディングの実践は本書で
このあと、本書ではレスポンシブコーディングを実践していきます。一つひとつ順を追って説明していくので、初めての方でもきちんとWebページを実装できるでしょう。ぜひ本書で続きを試してみてください。
