Webツール「LHCN」を作ってみました。ネガティブマージンを使った横並び要素をリキッドレイアウト化します

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

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

使い方

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

web-tool-lhcn01
赤枠の3つの部分に値を入力します

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

わかりづらいこのボタンです
このボタンです

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

簡易的な列数チェック

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

web-tool-lhcn03

ソースコードの吐き出し

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

web-tool-lhcn04

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


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

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

最終更新日:2015年3月9日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/web-tool-lhcn/trackback/