こんにちは！るーぷの新人コーダー、三木です。
前回ブログを書かせてもらったときは2月9日。入社10日足らずというところでしたが、あれから4ヶ月が経ちました。
まだまだ短い時間ですが、それでも色々な経験をさせてもらったなぁと思います。
その中でも、初めて「これ大変だった…」と印象に残ったお仕事は、「ランディングページ」のコーディングでした。
「ランディングページって画像がメインだからコーディングの手間が省けるんじゃないの？？？」と普通の方なら思われるはずです。
私の場合、職業訓練校で首ｶﾞｯｸﾝｶﾞｯｸﾝ白目向きながらIllustratorやPhotoshopの授業を受けていたので画像書き出し作業が苦手…というのが1点。
もう一つ苦戦したのは、「余白をpxで指定すると違和感がでる。」という点でした。
ここで「場合によっては%やvwで指定するんだなぁ~。」という学びを得ました。
比較関数「clamp」
以降もサイズ指定を試行錯誤していた私は、ある日、職業訓練校時代に憧れたclampさんと再会することになります。
clampというのはCSSで使える関数の一つで、例えば
「この画像はwidth:60%にしよう。でも小さすぎると見づらいから299px以下にはしたくない。
更に大きすぎても粗くなるから800pxまでにしたい。」といった際に、
width: clamp(300px, 60%, 800px); と書くと希望通りの大きさになります。カッコいい…
ここからさらに条件を厳しく
・画面幅1200px以上のとき、文字の大きさは36px
・上記の間で文字の大きさは可変。
これを実現するにはどうすればいいのか。
36/1200=0.03だから、clamp(20px, 3vw, 36px); にしてみました。
あれれーー？おっかしいぞーー!?だってこれ…769pxのときfont-size:23px;になっちゃうよね~?
20/769=0.026だから、clamp(20px, 2.6vw, 36px); にしてみました。
あれれーー？(1200pxのとき、まだfont-size:31.2px;しかありません)
数学が1年生の時しかない特殊な高校にいた私のさんすうぢからでは分かりませんでした。
ジェネレーター「Min-Max-Value Interpolation」
しかし、そんな超難問を解決してくれるジェネレーターがあるんです！
https://min-max-calculator.9elements.com/
Min-Max-Value Interpolation
VALUESに可変させる要素の最小値と最大値、VIEWPORTに画面幅の最小値と最大値を入力すると、きっちりその間で可変する式を算出してくれます。
※単位が「rem」になります。1rem=16pxという扱いのようなので、pxで指定する場合はremの数字を×16してください。
これでclampが使いたい放題ですね！
以上！新人コーダーである私愛用のジェネレーター紹介でした。
それでは、失礼いたします！
PREV