中身のサイズからグリッドシステムを逆計算
グリッドシステムを自作するときに、中身のサイズからカラムサイズと余白サイズを求めたいことがあります。
自分で計算するのは面倒なので自動で計算するFlashを作りました。
※Flash Playerが必要です。無ければスクリーンショット画像を表示します。
例えば広告サイズの160x600と250x250が横にピッタリ収まるようなカラムサイズと余白サイズを探すと、1カラム70px、余白20pxという解が見つかります。
2 カラム = 70 + 20 + 70 = 160 px
3 カラム = 70 + 20 + 70 + 20 + 70 = 250 px
他にも条件を満たす解はいくつかあるのですが、全てを求めるには総当たりに近い探索が必要です。そこで全ての答えを探索し、列挙するFlashを作りました。
また、1カラム70px 、余白20px のカラムサイズを一覧にすると次のようになります。
1 カラム = 70
2 カラム = 160
3 カラム = 250
4 カラム = 340
5 カラム = 430
6 カラム = 520
7 カラム = 610
8 カラム = 700
9 カラム = 790
10 カラム = 880
11 カラム = 970
この計算は比較的楽なのですが、結果を一覧にするのは面倒なのでこちらもFlashを作りました。
columnがカラムサイズ、gutterが余白サイズです。
カラムにボーダーを付けたり、角丸の四角にする時は、その分をgutterから引いてください。