しらいとブログ

ネットで検索してもなかなか出てこないIT情報を独自にまとめています

中身のサイズからグリッドシステムを逆計算

グリッドシステムを自作するときに、中身のサイズからカラムサイズと余白サイズを求めたいことがあります。

自分で計算するのは面倒なので自動で計算するFlashを作りました。

Flash Playerが必要です。無ければスクリーンショット画像を表示します。

Flashを貼る前にこのFlashを作った動機を書きます。

例えば広告サイズの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を作りました。

Flashを再生できません。代わりにFlashスクリーンショット画像を表示します。
Flashを再生できません。代わりにFlashスクリーンショット画像を表示します。

columnがカラムサイズ、gutterが余白サイズです。
カラムにボーダーを付けたり、角丸の四角にする時は、その分をgutterから引いてください。