もう悩まんでもええ！！画像や要素の縦横幅・縦横比自動計算ツール
2016/05/15
WEBデザインやコーディングを行っていると必ずと言っていいほど遭遇するのが
画像や要素の縦横幅の計算。
作成した画像を配置してみたものの、もう少し大きくしたい、小さくしたい。
CSSで大きさを設定するのに縦横のピクセル数を再算出しなければならない。
場合によっては縦横の比率を出す必要がある。
レスポンシブデザインが推奨されている昨今では、そんな場面が多々ある。
しかしながらその算出方法は至ってアナログ。
裏紙に大きい四角と小さい四角を書いて、
「〇〇：✕✕＝◎◎：△△」
などと小学校だか中学校だかで習った式に当てはめて、そこから電卓たたいて計算。
しかも計算しとる途中で
「どっちが大きい方でどっちが小さい方で、どれが縦でどれが横やねん！？」
僕はこういうのが嫌いで苦手で逃げ続けてきたからWEBの仕事やっとるといっても過言でもないのに、今なお僕を悩ましてやまない数学（算数）の魔力よ。
そんな僕を筆頭に、毎回縦横幅の計算で悩んでいるクリエイターのみなさんのために、自動計算ツールを作ってみた。
画像・要素縦横幅自動計算ツール
以下それぞれのバリエーションごとの自動計算ツール。
画像でも「div」などの要素でも計算できる。
縦の値を求める場合
左側に元サイズの横幅と縦幅を入力したのち、右側に変更したいサイズの横幅を入力すると色付きのボックスに計算後の縦幅が出る。
最も遭遇する頻度が高い計算。
横の値を求める場合
左側に元サイズの横幅と縦幅を入力したのち、右側に変更したいサイズの縦幅を入力すると
色付きのボックスに計算後の横幅が出る。
縦の値を求める場合と比べるとその頻度は低いが、思い出した時に役に立つ
縦横比を求める場合
画像や要素の縦幅と横幅の比率を求める場合に使用。
使用頻度としては①の方が高いか。
background-imageを可変対応する際のpaddingの算出に有効。
今回の記事で役に立ったこと、よかったこと。
- 毎回紙にいちいち書かんでよくなった。
- 裏紙の節約。
- 入力するだけで良いので、どっちが縦か横かわからんくならない。
- 一計算あたり2分は節約できる。
- 結果早く終わって怒られなかった。
「いちいち計算するのめんどいし、計算できるの作らなあかんなあ。でも作るのめんどいしなあ。」
としり込みしていたのだが、実際の制作時間は1時間足らず。
30回計算すれば、時間的に元が取れる。
このように毎回計算する手間を大幅に省くことができ大満足。
使ってみて役に立ったら下記のボタンでシェア！
