個別記事

前後の記事

固定幅ベースの elastic レイアウトサンプル

この記事が属するカテゴリー
CSS

elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。

文字サイズの変更に追随する elastic レイアウト

作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比 1:1.618 で区切っているのには特に理由はない。

幅の指定を em で指定しているんだけど、この値はブラウザのデフォルトフォントサイズを 16px と想定しているんで、ここら辺を変更している場合の幅は当然だけど変わってしまう。それと、サイズ変更した際に値の丸めが発生するんで、微妙に値を小さく指定していたりする。サイズ変更時にブラウザによってはカラム落ちする箇所があるかもしれない。いや、ないかもしれない。

elastic レイアウト関連

つか、そもそも elasticレイアウトって何？って方は、goya さんや aratako0 さんの記事が分かりやすいかと。

また、Elastic layouts ― Tyssen Design では、elastic レイアウトを採用しているサイトがいくつか紹介されているんで見てみると良いかもしれない。ちなみに、そのサイトも elastic レイアウト。

2007-03-12T21:16:07+09:00 | コメント (0) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/402

"固定幅ベースの elastic レイアウトサンプル"へのトラックバックはまだありません。

コメント

"固定幅ベースの elastic レイアウトサンプル"へのコメントはまだありません。

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)