ちょっと前にリキッドレイアウトとネガティブマージンを使った横並びを実装する方法を書いたのですが、計算式があるのならツールにしてしまえ、ということでWebツールを作ってみました。

LHCN – Liquid layout Horizontal element Calculator with Negative margin

ネガティブマージンを使った横並びのpx値を%に変換します。

（LHCNは「Liquid layout Horizontal element Calculator with Negative margin」という怪しい英語の略字です。英語ができないとホント辛いですね）

使い方

使い方はまず、「親要素」「列の幅」「マージン」の3つに値を入力します。

入力し終わった後に緑色の「%」ボタンを押すと、ネガティブマージンを考慮した%値に変換されているのでこの値をCSSで使います。

自分のオススメは「Gridulator」で横並びの幅と余白を選んでその値をLHCNに入力、という流れです。自分で作っといてなんですが意外と作業が捗ってビックリです。

簡易的な列数チェック

本当に簡易的ですが、追加で列数を入力すると横並び要素が親要素内に収まるかチェックします。カラム落ちしないか、してしまうかということですね。

ソースコードの吐き出し

こちらも簡易的ですが、入力された値を元に横並びを実装するpx単位と%単位のCSSを生成します。状況に合わせて使い分けられるようにSass&Compassのソースコードも吐き出します。（というか最早これは自分用）

あと列数を入力してチェックが通ると、HTMLコードのliが増える仕様になっています。

確認したブラウザはChrome、Firefox、Opera、Safari、IE8~11で、IE７以下は崩れますが計算はできました。変な値を入れなければちゃんと計算されるハズです…。ただ、あまりに早い入力→Tab移動をすると値がちゃんと書き換わらないので注意が必要です。

今後アップデートするとしたら、横幅の違う要素でも計算できるようにしたいですね。今の機能だと全ての列が同じ幅でないと計算できないので。前に書いた『要素の横並びをリキッドレイアウト（%単位）で、ネガティブマージンを使って実装する方法』を補足するために作ったようなツールなので、どうしても機能不足を感じます＾＾；