マルチデバイス対応の基礎知識
04 ベースコーディング

では実際にレスポンシブ・ウェブデザインのサイトを制作していきましょう。今回制作するのは架空のコーヒー専門カフェのWebページとなります。事前にコンテンツファーストで画面設計を行い、それにもとづいてPC / スマホそれぞれのデザインカンプを起こしておきましたので、これを元にレスポンシブでのコーディング実装を行っていきます。

レスポンシブですので、スマートフォンからデスクトップPCまで幅広い環境から閲覧されることを想定して作ります。従ってWindows、MacOSと各種ブラウザのバージョン、およびiOSとAndroidのバージョンを確認しておきます。今回は以下の条件で制作します。

今回のブレイクポイン卜は640pxの1箇所です。この他にはPC環境でコンテンツ幅を固定するために940pxに1つマイナーブレイクポイントを設けておきますが、640～939pxと940px以上はコンテナ横幅が固定されるか否かの違いだけですので、レイアウトパターンとしてはスマホ向け・PC向けの2種類のみとなります。

レスポンシブのコーディングを行う場合、大きく二通りのcssコーデイング方式があります。

①スマートフォン向けレイアウトをベースとし、大きな画面用のレイアウトで上書きする

②PC向けレイアウトをベースとし、小さな画面用のレイアウトで上書きする

①を「モバイルファース卜方式」②を「デスクトップファースト方式」と呼んでいます。どちらの方式でも出来上がる画面は同じものになりますが、基本的には①のモバイルファースト方式でコーディングすることが推奨されています。理由はモバイルファースト方式の方が非力なモバイル環境での負荷が低く、またシングルカラムが原則のスマートフォン向けレイアウトをベースにした方が大きな画面用の差分cssもシンプルになることが多いからです。

今回は動作対象環境がIE9 以上（ IE 8 以下非サポート）ということもありますので、一般的に推奨されているモバイルファースト方式でコーデイングすることにします。

動作環境と設計方針が決まったら、PC専用サイトを作る時と同様に文書構造の検討を行います。レスポンシブならではの注意点を挙げるとすれば、「PC／スマホ両方のレイアウトパターンを網羅できるように枠取りする」ということが挙げられます。つまり片方のレイアウトだけを見ながら検討するのではなく、PC／スマホ両方のレイアウトを同時に見ながら文書構造・レイアウト枠の検討をしたほうが良いということです。
今回の文書構造の概要は以下の通りとなっています。

次にレスポンシブ用のHTML・cssのテンプレ一卜を用意します。マルチデバイス対応の各種コードのうち、レスポンシブ用として必要なものをあらかじめ盛り込んでおきます（※ソース中の赤字箇所）。今回は事前に必要なコードを盛り込んだテンプレートを用意してありますので、内容を確認しておきましょう。

レスポンシブ・ウェブデザインの大きな特徴のひとつに、コンテナ幅の伸縮に伴って埋め込まれた画像や動画メディアなどのサイズも伸縮するという点があります。このような伸縮する画像埋め込みメディアのことを「フルードイメージ」と呼びます。
レスポンシブサイトの制作では、原則として全てのimg画像はフルードイメージとして伸縮するように設定しますので、リセットcssなどのベースcss設定の中に画像をフルードイメージにするための記述を加えておきましょう。背景画像や埋め込み動画、GoogleMapなども伸縮対応にしますが、そちらは個別のセレクタでの対応となりますので必要に応じて随時設定する形となります。

画像をフルードイメージ化したら、ブラウザの幅を広げたり縮めたりして画像のサイズが伸縮する様子を確認してみてください。 一般的に「フルードイメージ」と言った場合、width:100%;ではなくmax-width:100%;で設定されますので、画像自身の本来の横幅サイズ以上には拡大されないことに注意してください。このことは、準備する画像素材のサイズに影響します。

どのようなレイアウトにするのかによっても変わってきますが、カラム数の違いによってPCレイアウト用の写真素材よりもスマホレイアウト用の写真素材の方が最大サイズが大きくなることがあります。今回のサイトの場合も、メニュー写真はPC用レイアウトの場合は3カラムなので最大300pxとなりますが、スマホ用レイアウトの場合は、1カラム表示となりますので、スマホ用レイアウトの最大幅である640pxの場合には最大600pxで表示されることになります。

このように、レスポンシブサイトの場合は必要となる埋め込み画像の最大幅を正しく判断して素材を準備する必要があります。

基本設定が完了したら、いよいよベースレイアウトのコーデイングです。
今回はモバイルファース卜方式で制作しますので、まずはスマホ用レイアウトを基準にスタイル指定を行っていきます。ここで設定するスタイルは、スマートフォン向けだけでなく、全ての画面サイズに共通するベース設定となりますので、横幅が広がった際のこともある程度考慮しながらコーディングしていきます。
なおこの後のスタイル指定は全てbase.cssにまとめて記述していきます。base.cssにはあらかじめコンポーネン卜ごとにコメント見出しがつけてありますので、それを参考にcssコードを加えていくようにしてください。

まずは全体に共通する基本フォント、リンク、コンテナ枠の設定を追加します。コンテナ枠はスマートフォン向けレイアウトでは自動伸縮なので特にwidthの指定は必要ありません。ただしPCレイアウトを考慮して最大940pxで固定されるようにしたいので、あらかじめmax-widthで最大幅を指定しておきます。

ヘッダー領域のポイントは、背景画像です。ヘッダー領域はブラウザに対して横100%で広がります。背景画像はそのヘッダー領域全体を常に覆うように伸縮するため、背景画像をフルードイメージ化する必要があります。背景画像のフルードイメージ化には、CSS3のbackground-sizeプロパティを使用します。

サイトロゴはヘッダー領域の上下左右中央に配置されていますが、今回はヘッダー領域の上下左右にpaddingを設定することで口ゴを中央に配置します。この時paddingをpxではなく%指定にしておくことで、ウィンドウサイズに応じて自動的にヘッダー領域のpaddingサイズも一定比率で伸縮するようにできます。何%にすれば良いかは、スマホ用のデザインカンプからまず固定数値のpxサイズを計測し、「padding÷親要素のwidth×100」で割合を計算します。

左肩にあるレースのオブジェク卜は単なる装飾ですので、before擬似要素で実装します。このレースの装飾も、ヘッダー領域のサイズに応じて一定比率で拡大・縮小するようにする必要がありますので、ここも親要素#headerのサイズを基準として何％にするかを計算する必要があります。

用意したbefore擬似要素にダミーの背景色をつけて、拡大・縮小してみてください。width / heightは％指定されていますので、親要素のサイズが大きくなれば同じ比率でどこまでも拡大することが分かります。
この枠に、レースの背景画像を background-size: contain; で指定します。すると画面幅が広がった時にレース画像が原寸以上に拡大され、画質が劣化してしまう状態になります。

このような場合、img画像のフルードイメージであればmax-widthで自分自身の画像サイズ以上には拡大されないように設定できますが、背景画像のフルドイメージの場合はそのように自動的に途中からサイズ固定するごとはできません。そこで背景画像を設定しているbefore擬似要素自身の最大サイズをmax-width / max-heightで指定しておくことで、画像の原寸サイズ以上には拡大しないように調整しておきます。

グローバルナビ領域は、floatでli要素を横並びにして実装します。
li要素の横幅がpx固定ではなくコンテナ領域の1/4幅で伸縮するように%で指定します。メニュー数は4つ、全て均等幅で良いので、1/4=25%がwidthのサイズとなります。

今回はGoogleMapを埋め込んで地図を表示しています。GoogleMapの埋め込みコード自体は、GoogleMapのサイトから簡単に取得できますが、埋め込み用のHTMLコードは固定サイズとなっているのでそのままでは画像のように伸縮しません。レスポンシブサイトではこのような埋め込みメディアもフルード化する必要があります。

GoogleMapのコードの特徴はiframe要素になっているという点です。これをフルード化するためには、まずそのiframe要素をdiv要素などで囲む必要があります。今回は既に<div class="map">でiframe要素を囲んでいますので、それを利用して以下のようなコードを記述します。

このコードのポイン卜はiframeを囲む親要素の高さをwidthに連動する％指定のpaddingで指定するという点です。既にheader領域で解説した通り、要素のpaddingサイズを％指定した場合、その親要素のwidthサイズを基準として大きさが決まります。この仕組みを利用して高さをpadding-bottom（padding-topでも可）で指定することで、要素のアスペク卜比を指定できるのです。あとはこの要素の中に絶対配置でiframe要素を重ね、width:100%;、height:100%; で親要素のサイズいっぱいに広がる状態にしてやれば埋め込みコードのフルード化が完成します。

この仕組みはYoutubeなどの動画埋め込みでも活用できますし、一定のアスペク卜比で伸縮する領域内に何かを絶対配置したいような場合にも応用可能ですので、覚えておくと良いでしょう。

GoogleMapを含むイントロ領域のスタイルを設定します。ここは特に難しいことは無いので、普通にデザイン通りにスタイル指定しておきます。

ここでブラウザ幅を狭くして表示を確認すると、デザインカンプと違ってイン卜口領域の左右に10pxの余白があることが分かります。スマートフォンやタブレットなど、全画面表示になるデバイスの場合、コンテンツの左右にある程度の余白（10～20px程度。今回は10px）が無いとレイアウト的に読みづらい状態となってしまいます。そこで.containerには一律で左右に10pxのpaddingが確保してあります。しかし背景色・背景画像がついている場合には画面幅いっぱいまで背景色背景画像で塗りつぶすようにデザインすることが多いため、特定のコンポーネントでは左右の余白が邪魔となってしまいます。
このようなケースを解決する方法はいくつかあるのですが、今回は幅いっぱいまで広がるコンポーネントにネガティブマージンを設定することで、左右の余白領域分を相殺する方法を採用します。

この方法では、一律で余白をつけておき、必要に応じてclass指定するだけで左右余白を相殺できます。デザインに合わせてHTMLの構造をいちいち調整しなくても済むという手軽さがメリットとなります。

残りの領域のスタイルを設定します。ここは特に難しいことは無いので、普通にデザイン通りにスタイル指定しておきます。