ちょっとだけ、レスポンシブWebデザイン

2012年03月23日

ブラウザサイズによって、2カラムから1カラムへ

このブログ作成のお話。
ほんの少しだけ、レスポンシブWebデザインってどうやるのか試してみました。

変化するのは1点のみ。
ブラウザ横幅が990pxまでは2カラムで、

2カラムWebデザイン

それより小さくなると、1カラムになります。

1カラムWebデザイン

本当のレスポンシブWebデザインの場合、タブレットやスマートフォンに合わせてデザインを変化させないといけません。
しかし、スマートフォンはあるていどPC向けのサイトにも対応してくれるので、2カラムをやめるだけでも効果があると考えたのです。

実際に記述したのは、HTMLのhead内に、

<link rel="stylesheet" media="screen and (max-width:990px)" href="w660.css">

の1行を追加したのみです。
あとは、1カラムの場合のCSSを、w660.cssに記述します。
floatを解除したり、タイトル部分のpositionを変更しました。

実際にレスポンシブWebデザインに挑戦するまでは、jQueryでも使わないとダメなんだろうなー、と考えていたのですが、ものすごく簡単でした。
すごいなあ。

少しの手間で、携帯端末でも見やすくできる事がわかりました。
本格的なレスポンシブWebデザインとなると、設計の段階から考えないといけないので、もっと工夫しないといけませんが。
今後の課題として、勉強していきたいと思います。

それにしても、iPhoneを持っていないのは、結構、大きなハンデだなあ…。