両端揃えの均等配置で要素幅や余白を計算するのに疲れたあなたに贈りたい自動計算ツール
2016/05/15
「両端揃えの均等配置」
バナーやら画像やらナビゲーションやら、やたらとこの手法が多い。
確かにコンテンツ幅一杯に均等に整列しているさまは見ていて気持ちがいいのだが、結構コーディング時にめんどくさい。
メジャーな手法としては各要素に「float:left;」と「margin-right:○○;」を設定し、一番右側に並ぶ要素に「margin-right:0;」を設定するのだが、実際このマージンを算出してみると、そないに綺麗に割り切れる値ではないことも多い。
レスポンシブデザインならば%指定をすることも多く、要素の幅やら数やら余白やらで混乱することも多い。
「何てめんどくさいデザインになってしまったのだ・・・」
と後悔することも多々。
そこで今回は後悔するだけではなくて、自動計算ツールを作ってみた。
Contents
このパターンの計算がめんどくさい理由
実際に経験された方はお分かりとは思うが、このパターンの計算はめんどくさい。
その理由としては
「余白の数＝要素の数－１」であること。
例えば1000pxのコンテンツ幅に対して、二つの要素を均等配置する場合。
余白が0pxであれば、要素の幅は迷うことなく500px。
この計算ができない場合は自動計算ツールを使っても意味がないと思われる。
しかし余白が10pxの場合、20pxの場合となった場合、未成年のやわらか頭ならば
「(1000px-10px)÷2＝495px」
瞬時に数値をたたき出すのだろうが、僕のようなおっさんはそれができない。
なんとなく余白を2で割ってみたりして、後程己の脳髄の至らなさに打ちのめされる。
そしてさらにコンテンツ幅がもっと複雑な数値になり、要素の数が増えるともはやお手上げ。
毎回裏紙に四角形を並べて書き、
「勉強なんて世の中出たら関係ないわ！」
などとほざいていた頃にやった数学（算数）で苦労する羽目になる。
そんな僕を筆頭として、いまいち数学（算数）が苦手で、要素幅や余白を計算するのに疲れてしまったクリエイターのみなさんのために作成した自動計算ツールがこれだ！！
両端揃えの均等配置の要素幅・要素数自動計算ツール
以下それぞれのバリエーションごとの自動計算ツール。
画像でも「div」などの要素でも計算できる。
また単位も特に設定していないので、%指定での計算も可能。
その場合、全体の幅は「100」を入力し、要素の幅と要素余白の単位も%となる。
要素の余白を求める場合
コンテンツ全体の幅と要素の幅、そして要素の数が確定している場合に要素の余白を計算するフォーム。
「全体の幅」「要素の数」「要素の幅」を入力するとしっかりと最終要素が「margin-right:0;」で均等配置になる余白が色付きのボックスに算出される。
画像の大きさが決まっている場合や、キリのいい数値で算出したい場合に使用。
要素の幅を求める場合
コンテンツ全体の幅と要素の余白、そして要素の数が確定している場合に要素の幅を計算するフォーム。
「全体の幅」「要素の数」「要素余白」を入力すると「要素の幅」が色付きのボックスに算出される。
レスポンシブデザインなどで、余白を「1%」「2%」といった感じで指定したい場合に適切な要素の幅を算出できる。
今回の記事で役に立ったこと、よかったこと。
- 毎回紙にいちいち書かんでよくなった。
- 裏紙の節約。
- 入力するだけで良いので、どっちが縦か横かわからんくならない。
- 一計算あたり4分は節約できる。
- 結果早く終わって怒られなかった。
前回記事のもう悩まんでもええ！！画像や要素の縦横幅・縦横比自動計算ツールとほぼ同じ感想。
しかし、縦横比の計算に比べるとかなりの時間が短縮できるぞ。
所詮は単純な計算では人間（特に僕）は機械にはかなわない。
だったら機械に指示を与えて、計算は機械にやらせましょうということで。
使ってみて役に立ったら下記のボタンでシェア！
