|
|---|
この連載が本になりました！
本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。
レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック
定価：2,625円 (本体2,500円)／形態：B5変 (232ページ)
ISBN：978-4-04-886323-0
メディアクエリーを設定し、グリッドデザインで大きな画面にも対応した「枝豆隊」をフルードデザイン（リキッドレイアウト）に変更します。レスポンシブWebデザインによるサイト制作もいよいよ今回で完成です。
フルードグリッドへの変換
前回の記事で、1024px以上のスタイルシートが一通り完成しましたが、この状態ではウィンドウサイズを広げてもpxで幅を指定している#contents、 nav、 footerの幅は固定されたままです。そこで、px単位で幅を指定しているこれら3つの要素のwidth、 margin、paddingの値を%単位に変更し、ウィンドウ幅に応じて要素の幅が変わるようにします。
フルードグリッドの完成により、ウィンドウ幅に応じてレイアウトが拡大・縮小する「枝豆隊」
いわゆるリキッドレイアウト（可変レイアウト）と呼ばれるレイアウトですが、リキッドに対応したグリッドデザインを特に「フルードグリッド」といいます。レスポンシブWebデザインはフルードグリッドを導入することで完成します。
カラム幅の変更
pxで指定していた値を%へ変換するには、以下のような計算式を使います。
最初に、左側に配置した#main（620px）の横幅を％に変換してみましょう。#mainの親要素は#contents（960px）ですので、前の計算式に当てはめると、
となります。
次に、#mainのmargin（10px）の値を計算しましょう。
続いて、#sub（300px）の値も以下のように計算します。
計算して求めた値をもとに、スタイルシートを以下のように書き換えます。
●px指定（固定）
#contents #main,
#contents #sub {
float : left;
margin : 0 10px }
#contents #main { width : 620px}
#contents #sub { width : 300px}
↓
●%指定（フルードグリッド）
#contents #main,
#contents #sub {
float : left;
margin : 0 1.0416667%} /*10/960*/
#contents #main { width : 64.5833333%} /*620/960*/
#contents #sub { width : 31.25%} /*300/960*/
#mainや#subの親要素である#contentsのwidth（960px）も%に変換します。#contentsの親要素はbody要素であり、body要素の幅はhtml要素の幅（つまりウィンドウ幅）と同じです。そこで、メディアクエリーで指定している1024pxを#contentsの親要素の幅として計算します。
●px指定（固定）
#contents {
overflow : hidden;
width : 960px}/* 960/1024 */
↓
●%指定（フルードグリッド）
#contents {
overflow : hidden;
width : 93.75%} /*960/1024*/
ナビゲーションの指定
ナビゲーション（nav ul）のwidthも同様の方法で計算すると以下のようになります。
●px指定（固定）
nav ul {
width : 960px;/* 960/1024 */
margin : 0 auto}
↓
●%指定（フルードグリッド）
nav ul {
width : 93.75%; /*960/1024*/
margin : 0 auto}
footerの指定
フッター（footer）の幅も以下のように%へ変更します。
●px指定（固定）
footer {
width : 940px;
margin : 0 auto}
↓
●%指定（フルードグリッド）
footer {
width : 91.796875%; /*940/1024*/
margin : 0 auto}
