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

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 レイアウト。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/12

Comments