【プログラミング・Web制作勉強ログ#71】5/16の積み上げ成果

2022年5月17日2022年5月18日

今日の積み上げ 157日目成果

#今日の積み上げ 157日目成果

①5/15日報執筆⇒◎
②デザインカンプ中級編(Sass)
　・レスポンシブデザイン⇒中間サイズ90%
(その他)
・隙間時間のインプット⇒２本
・学習の改善点検討⇒×
・断スイーツ(21日目)⇒◎

地元のワーケーションとして誘致してるホテルのカフェで少し作業して、気分転換。
— おかつ🌱開業準備中 (@o_89965328_k) May 16, 2022

＼宣言した内容はこちらです／

本日の学び

「font-size: 〇vw;」だけではうまくいかない

　昨日の記事でフォントサイズを画面サイズに合わせて可変できるようにしてみようと書いたところで早速試してみました。

　「font-size: 〇vw;」と単純に入力できるかなと思いましたが、これだと、画面サイズが大きくなればなるほど文字サイズが大きくなる、逆に、小さくなればなるほど縮んでしまうという問題点があります。

フォントサイズを、「ちょうどよさそうな」1.5vwに指定した場合の可変状況です。

　また、これは持論に過ぎないですが、デザインカンプをコーディングする前提だと、カンプで指定される単位は「px」がほとんどなのではないかと思います。

　カンプを忠実に再現するためには、「vw」ではなく、ピクセル数が忠実に再現できる単位で設定するべきなのかなと思います。「vw」では小数点がどうしても入ってしまう場合があるので・・

例：1080pxの画面で18pxのフォントがカンプで指定されていた場合、「vw」でコーディングしようとすると…
　1080px : 100(%) = 18px : X　（1080px画面を100％としたとき、18pxは何%になるか）
　1080X＝ 1800
X = 1.666666666666667(vw)
となってしまいます。

　つまり、最小値と最大値は固定にした上、「最小値～可変できるサイズ～最大値」を設定できるプロパティを使うのがベストですね。

clamp()使ってみた。が、「推奨値」ってどうやって設定するの！？

　そこで見つけたのが、「clamp(最小値,推奨値,最大値);」。

　最小値と最大値を設定するのはわかるんだけど、「推奨値」ってどうやって設定するの！？という疑問が浮かび上がる。

　色々解説ググってみました。

参考記事メモ

WEB制作の備忘録めも

font-sizeはclamp()関数で指定するのが良さそうこれまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:100…

株式会社エヴォワークス -EVOWORX…

CSS関数のclamp()・max()・min()についてまとめてみるこんにちは。4回目の登場です。エンジニアのuchimuroです。存在は知っているけれども実はまだ使用したことのないCSSのプロパティや関数って結構あるんですよね…。そんな中…

東京のホームページ制作 / WEB制作…

CSSの数学関数を使って記述をスマートに！【calc(), min(), max(), clamp()】 | 東京のホームページ制作 / … CSS関数をご存じですか？よく使うのがcalc()やtranslate()、rgba()などで、関数名 +

　ググりまくったところ、結論、「推奨値は自分で考えるしかない」ということでした。笑

　推奨値は相対値で入力することが前提なので（可変できる「間」を絶対値で設定したらそもそもclampが成り立たない）、最小値と最大値の間で、「ちょうどよい値」になりそうな相対値を設定するには、自分で確認しながらやっていくしかないということだと思います。まさに正解がないもの。

　私の場合は、デザインカンプで書かれている画面サイズ(1080px)-文字サイズ(h3=25px, p=16px)の比率を「推奨値」にした上、clampは以下のとおりコーディング。

        .service_flex_txtarea_re {
            z-index: 998;
            background-color: $mainColor;
            width: unquote('min(100%, 500px)');
            margin-top: 145px;
            padding-right: 180px;
            h3, p {
                color: $white;
                padding-left: clamp(28px,3.703703703703704vw,40px);
            }
            h3 {
                margin-top: 40px;
                font-size: clamp(2rem,2.314814814814815vw,2.5rem);　//この部分
                line-height: 1.5;
            }
            p {
                margin-top: 18px;
                font-size: clamp(1.4rem,1.481481481481481vw,1.6rem); //この部分
                line-height: 1.5;
                padding-bottom: 45px;
            }
        }