レスポンシブ・レイアウト

パソコン、タブレット、スマートフォンでサイトを表示する際、それぞれの画面の解像度を元にレイアウトを最適化して表示する「レスポンシブ・レイアウト」。Webの仕事にも携わっている以上、最近流行ってきている新しいWEBレイアウトの手法を知らないわけにはいかないので「レスポンシブ・レイアウト」の勉強を始めました。

「レスポンシブ・レイアウト」は、あらかじめ設定した解像度を超えた（あるいは下回った）場合、読み込むCSSを変化して見た目をガラリと変化させます。例えば、パソコンで表示した場合には3カラムなのに、タブレットでは2カラム、スマートフォンでは1カラムになり、サイドバーはメインコンテンツの下に回り込む…そんなイメージです。

中には解像度に合ったレイアウトにとどまらず、解像度の小さな端末ではサイドバーを非表示にするなど情報に変化を与えているケースや、画面の解像度…単純に言えば画面のピクセルサイズによって動的にレイアウトが可変する「リキッド・レイアウト」を併用しているケースもありますね。

ちなみにこのサイト『弐条くらげの「とはずがたり」』は、中央のメインコンテンツと左右のサイドバーはピクセル指定でサイズ固定した3カラムのレイアウト・スタイル。メインコンテンツの横幅が足りないくせに長文だったりするので、その読みにくさには定評があります（笑）。そして、なによりもヘッダとフッタのみが自在に可変する「なんちゃってリキッド・レイアウト」を採用しております（爆）。

そろそろ、このサイトのレイアウトも何とかしたいところです。