ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介
yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか？ 「エラスティック（elastic）」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ
固定幅ベースの elastic レイアウトサンプル
elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
lllcolor.com
