マルチデバイス対応の基礎知識
05 メディアクエリを使ったレイアウト調整

既にスマートフォン向けのレイアウトはベースとして設定済みですので、640px以上のスタイルを記述するにめ、メディアクエリの記述を追加していきます。メディアクエリの記述構文は「スクリーンサイズが640px以上」となるように条件を作りますので、次のような形となります。

メディアクエリを記述する場所としては、

• ①ベーススタイル記述の末尾に1箇所にまとめて＠media構文を記述する
• ②各コンポーネン卜ごとにベース記述の後ろに続けて＠media構文を記述する

のように二通り考えられます。どちらで記述しても同じように作ることは可能なので、自分の好みで選択しても構いません。ただ、比較的複雑なレイアウト調整が必要なデザインの場合は、ベースレイアウト記述との比較がしやすいため②の方法の方が作りやすい場合が多いように思われます。

今回は各コンポーネン卜の末尾にメディアクエリを分散記述する②の方法で制作していくことにします。

ヘッダーとグローバルナビでは、レイアウトの微調整を追加します。

このような要領で、各コンポーネントごとにレイアウト変更が必要な箇所にメディアク工リを追加していきます。

残りのコンポーネン卜については全て640pxを境としてシングルカラム→マルチカラムのカラム数変更が必要となります。640px以上では一定の格子（グリッド）に沿ってアイテムを配置する「グリッドレイアウト」となっていますが、レスポンシブ・ウェブデザインではこのグリッド自体が伸縮する「フルードグリッド」と呼ばれるメディアクエリを使ったレイアウトの調整状態を作る必要があります。
具体的な手順としては、まず固定pxサイズのカンプから各カラムと段間のサイズを計測し、その数値をpxから％に変換するという作業を行います。オリジナルデザインのレイアウトを独自にレスポンシブでコーディングする場合には、全ての伸縮対応サイズをpxから％に直す計算を自分で行う必要があります。
固定pxのサイズを％に変換する作業の際、重要なのは「直近親要素のcontent-boxのサイズ」を基準（100%）として、対象となる子要素のwidthを割り出すという点です。

以上の方法で今回のデザインにおける各カラムのwidthを％で算出するとこのようになります。

割り出した％単位のwidthを使ってフルードグリッドのマルチカラムでレイアウトを整えます。

背景にチェック柄がついている2つの領域（イン卜ロスタッフ）については、それ自身に上下左右20pxの固定padding が設定されています。固定pxのpaddingやborderが設定された領域をフルードグリッド（widthを％指定）にする場合には、box-sizingを使ってpadding / border も含めた全体（border-box）をwidthとして計算させる必要があります。
またこの2つの領域は、左右の余白をネガティブマージンで相殺する設定も付いていますので、640px以上の時にはこの設定が解除されるようにしておきます。

次にイントロ・スタッフ領域の中の子要素も2カラムのフルードグリッドにします。スタッフ領域は先ほどbox-sizingでborder-boxに設定しましたので、paddingも含めた全体がwidthとして計算される状態となっています。このようborder-box化された領域内の子要素を更にフルードグリッド化する場合には、少々注意が必要です。

スタッフ領域（#staff）はボックスモデルの計算上paddingを含めてwidthとしていますが、物理的に子要素を配置できる最大領域は、paddingを除いた純粋なコンテンツ領域、つまりcontent-boxの領域になります。従って子要素をフルードグリッド化する時には、親要素のbox-sizingの値にかかわらず、あくまで親要素のcontent-box領域のサイズを100%として計算をするという点に気をつけてください。
widthが指定されておらず（auto）、border-boxにもなっていないイン卜口領域（#intro）についても、ボックスモデル計算からcontent-box領域のサイズを計算（940-40=900px）し、それを100%として子要素のwidth%を計算します。

ここまでの設定で、レスポンシブ・ウェブデザインの実装における最も重要な「レスポンシブ」なレイアウトのコーディングがほぼ完了となります。レスポンシブのコーデイングで重要なことは、基本的に以下の2点です。

1. ブレイクポイン卜を決めてメディアクエリでcssを条件分岐させ、スタイルを上書きする
2. pxから%に単位を変換して、フルードグリッドでレイアウトする

ここさえしっかり押さえておけば、基本的にどんなレイアウトでも自由にレスポンシブにすることはできますので、しっかり理解するようにしておきましょう。