レスポンシブウェブは可変グリッドレイアウトが必須

マルチデバイスに対応するレスポンシブウェブデザインには、グリッド可変というCSSでのレイアウト方法が必要不可欠になる。フルードグリッドレイアウトとも呼ばれるらしい。

今までブロック要素(カラム幅)は、CSSのwith:数値PXで固定していたんだけど、これをwith:数値%にしてスクリーン幅に応じ、カラム幅を変化させるわけですね。

ブロック(カラム幅)のPX指定を%指定に変える計算式

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

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

620px÷960px×100=64.583333333%

となります。

ASCII.jp:フルードグリッドとレスポンシブWebデザインの完成 (1/3)|ゼロから始めるレスポンシブWebデザイン入門

ipadのとき、スマホのとき…カラム、ボックス群は全部計算していかなければなりません。

Dreamweaver CS6には、可変グリッドレイアウト機能が搭載されているらしいけど、金欠だから買えないし(´;ω;`)手作業で頑張るべし!

あとネックになるのが凝ったデザインをするとき。とくに画像…グリッド可変しても大丈夫なように緻密な設計が必要になります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です