このページの本文へ

DESIGN ゼロから始めるレスポンシブWebデザイン入門 ― 第7回

フルードグリッドとレスポンシブWebデザインの完成

2012年07月17日 13時38分更新

菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷
responsive

この連載が本になりました!

本連載で紹介したレスポンシブ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の値を%単位に変更し、ウィンドウ幅に応じて要素の幅が変わるようにします。

2-6-zu01.png
フルードグリッドの完成により、ウィンドウ幅に応じてレイアウトが拡大・縮小する「枝豆隊」

 いわゆるリキッドレイアウト(可変レイアウト)と呼ばれるレイアウトですが、リキッドに対応したグリッドデザインを特に「フルードグリッド」といいます。レスポンシブWebデザインはフルードグリッドを導入することで完成します。

カラム幅の変更

 pxで指定していた値を%へ変換するには、以下のような計算式を使います。

変換したい値÷変換したい値の親要素の幅×100

 最初に、左側に配置した#main(620px)の横幅を%に変換してみましょう。#mainの親要素は#contents(960px)ですので、前の計算式に当てはめると、

620px÷960px×100=64.583333333%

となります。

 次に、#mainのmargin(10px)の値を計算しましょう。

10px÷960px×100=1.041666667%

 続いて、#sub(300px)の値も以下のように計算します。

300px÷960px×100=31.25%

 計算して求めた値をもとに、スタイルシートを以下のように書き換えます。

●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の親要素の幅として計算します。

960px÷1024px×100=93.75%

●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}

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング