仕事に(Web に)活かせる数学はある

生活には役立たないことが多かろう、と、高校時代から常々思っている数学。
とは言え、中学校での数学・小学校での算数は、生活でも使えるものだし、仕事には活かせるモノが確実にある、という例。

CSS で出来ることが増えた、とは言え、算数が出来ない（わからない？　否、忘れたんやろ？）ヤツを増やすようなモノは、あまり歓迎出来んな、ということが最近あった。

使ってる人も居ると思うが、transform だ。
設定なんかは、この辺り↓を見て使ってくれる分には文句は言わない。

【CSS3】Transform（変形）関連のまとめ - Qiita

その代わり、対象ブラウザぐらいは、確認してくれ。
そして、動作環境の下限を考えていないような所で仕事をするなら、念のためベンダープレフィックスぐらいは付けておいてくれ。

CSS で中央寄せマスターに、おれは、なる！

というように、そのモノの解説はすでに先人の方々が置いてくれているので、検索してくれればいい。
問題は、そもそもの動作だ。
上記サイトにあるように、センタリングで

position: relative;
left:50%;
transform: translateX(-50%);

というのを良く見かける。
まぁ、設定がラクなのは良かろう。そして、中身がテキストで可変するらしき場合には、なかなかの有用だ。ましてや、position で動かしていたら、そらメンドクサイわな。

な・ん・で・す・が！
画像で幅が固定されてる、もしくはレスポンジブやグリッドのために、画像幅もパーセンテージ指定してるなら、transform する必要なんか無いやん。
ってことに、気付いてない人、多過ぎません？

デバイス幅；100％
画像幅；40％
である場合に、この画像がセンタリングされる、余白との関係を考えたこと、あるか〜？

こんなん、正直、小学校の問題やで。
引き算と割り算。割り算言うても、半分にするなんか当たり前過ぎるやろ。

＜解答への道筋＞
画像の40％ が、表示に必要な部分なので、余白は 100 - 40 = 60
センタリングされる、ということは
・画像以外の余白が『左右均等に存在する』
ということ。

したがって
【余白30％】［画像とか40％で表示するモノ］【余白30％】
となればいい。
そして、『左右均等に』ということは、
『均等に分けられたものなら「左だけ」を見ても正しい』

結論
left:30%;
で事足りる。

そうやって考えたら、いちいち position 使って考えんでも、margin-left か、padding-left でセンタリングできるモノ、いっぱいあると思うで。

というわけで、もうちょっと算数使おうな。