レスポンシブデザインを固定幅＋リキッドレイアウトに一歩前進させました。

Posted on 2012年9月29日(土) 19:30

ちわーす。
まだまだ頑張るぞ（２回目）、かっぱふぅ（ @kappafoo ）です。

今日は久しぶりに時間が取れたので、どっぷりと自分のWordPressのテーマをカスタマイズしました。

といっても、できたことは２つ！！。
今日はその内の１つの「レスポンシブデザインを一歩前へ」をお送りしたいと思います。

これは、ちょっと前に自分のテーマをレスポンシブデザインにしていたんですけど、ただ単純に、メディアクエリを使って、ウィンドウサイズごとにカラムの幅を％表示にして、CSSの「float」文で並べてました。

しかし、このやり方だとウィンドウサイズの変化によって、サイドのカラムの幅も％で変わっていくので、facebookやadsenseパーツを設置するのに、幅が足りなくなります。

これを防ぐためには、サイドカラムを固定幅にしてメインカラムを可変にする必要があります。

これのやり方を、約半日探しました。いろいろなサイトで説明があったんですが、SetucoCMSプロジェクトさんの「みんな大好きリキッドレイアウト～固定幅＋リキッドレイアウトに挑戦～」が理解し易かった。

みんな大好きリキッドレイアウト～固定幅＋リキッドレイアウトに挑戦～ | SetucoCMSプロジェクト
リキッドレイアウトとは、可変レイアウトの一種で、ブラウザ幅に対して％で幅を指定する。リキッドレイアウトなら閲覧環境に合わせて最適なレイアウトに可変できる！とはいえ、「ナビゲーションの幅が可変すると使いづらい」とか一部は固定幅にしたい。そんな時の固定幅+リキッドレイアウト。