エラステックレイアウト(Elastic layouts)のメモ

2007年3月13日

Lucky bag::blogさんのトコでエラステックレイアウトのサンプル3種が公開されています。レイアウト手法としてメインストリームとなる可能性は低いかもしれませんが、今後のためにelastic layoutの記事をまとめておきます。

エラステックレイアウトに関する記事

日本語リソース。TRANSさんとこの記事が良くまとまってます。Fixed or fluid width? Elastic! | 456 Berea Streetの訳あり。

海外リソース。エラステックの元ネタはA List Apartの記事らしいです。

Lucky bag::blogさんのところにも記載がありますが、このレイアウト手法ってemで指定するから横幅とかがどのくらいになるのかが分かりにくいですよね。ちょっとずつ値をずらして幅を調整していくしかないのか？

そこでふと思い出したのががbodyにfont-size:62.5%を指定するというやつ。これをbodyに指定しておけば、子要素にフォントサイズで1.2emと指定すると丁度12pxと同等のサイズになるというTipsですが、副次的な効果としてelasticレイアウトで横幅指定するときに使えるんじゃないかと思ったり。つまり400px相当の幅にしたければ40emとすればOKという話です。ただしブラウザで設定している文字サイズが変われば当然幅は変わってしまいます。

関連エントリー