突然ですが皆さん、
リキッドレイアウトにおける
フォントサイズの問題、
どのようにしたらよいか
悩んだことありませんか？？
時は令和3年。
リキッドレイアウトももはや当たり前のデザインになっております。
しかし、そこでぶち当たるのがフォントサイズ問題。
調べてみると、vwやremを駆使したり、calcやclampを使用したりしてるものもあります。
メディアクエリの区切り方にもよるのですが、
弊社で設けてるコーディングガイドラインに沿って
リキッドレイアウトにおけるフォントサイズの最適解を今回、
編み出しました。
結論
See the Pen
eYgxOQd by dtmnohama (@dtmnohama)
on CodePen.
のっけから結論を書くと、上記のようなソースになりました。
codepenのページに飛んで(右上のEDIT ON CODEPENをクリックすると飛べます)
画面幅を動かして見てください。良い感じに画面幅に追従してフォントサイズが伸縮し、
20pxか10pxで固定されます。
それでは細かく解説していきましょう。
clamp
まず、肝になるのはclampです。
cssのclampは(最小値,推奨値,最大値)の引数を設定し、
対応する値を決めるものです。
基本は可変する推奨値をキープしつつ、
その値が最大値まで達したらそれ以上大きくなることはなく、
最小値まで達したらそれ以上小さくなることはないという優れたものですね。
widthやheightは最小値、最大値を決める
max-widthやmin-heightなどがありますが、
font-sizeには最小値や最大値を決めるものがありません。
vwだけ指定してても、画面幅に追従して可変するので場合によっては
フォントがめっちゃ小さくなったり大きくなったりしてしまいます。
そこで役立つのが、clampです。
font-size: clamp(14px,5vw,20px);
↑こんな感じですね。
font-sizeは%指定しても可変するわけではないので、
画面サイズに追従してサイズが変わるわけではありません。
vw
そこでvwを使えば可変できるのですが、
vwは
1vw = 画面幅 / 100
という値なので、
画面幅が1000pxの場合
1vw = 1000px / 100 = 10px
という計算になります。
つまり、画面幅によって1vwの値は
相対的に変わってしまうという訳ですね。
しかし、これをclampに利用しようとすると上述のfont-size: clamp(14px,5vw,20px);
この記述は、最低値が14px、最大値が20pxの設定なんですが、
画面幅1000px、推奨値5vwの場合、
1vw = 400px / 100 = 4px * 5 = 20px
となってしまいます。
これの何が問題というと、
画面幅1000pxの時font-sizeは50pxなのですが、
最大値は20pxなので20pxとして表示されます。
リキッドレイアウトは画面幅に追従して
画面が大きくなったり小さくなったりしても
元のレイアウトをキープしたまま崩れず表示できるのがウリの
デザインですが、上述の設定だとfont-sizeは
vwが20pxを下回る画面幅にならないと小さくなっていかないのです。
この場合は
1vw = 400px / 100 = 4px * 5 = 20px
画面幅を400px以下まで縮めないとfont-sizeが縮小していきません。
最早大きめのスマホのサイズです。
ちまちま計算を行えば、
レイアウトに合わせた最適なvwの値を探せますが
そんな面倒なことはしたくありません。
なので、clampの推奨値の値を
自動計算してくれるように、上記のスクリプトを編み出しました。
本当はsass(scss)のmixinを使ったほうがスムーズに
スタイルが適用できたのですが、ここで一つ問題が生まれました。
比率計算
clampの推奨値vwの値を自動計算するということは、
画面幅に合わせて、vwがの値が設定した最大値と同じになればいい
ので、仮に画面幅1000pxとして最大値20pxの場合、理想としては
1 : 10 = x : 20
x = 20 / 10
x = 2
1vwが10pxの時、20pxは2vwという
結果が導き出せればいいので
font-size: clamp(14px,calc(20px / 1vw),20px);
となるのですが、
calc関数で自動的に計算してもらえれば簡単に結果が出せると思ったのですが、
calcの仕様上、除算(割り算)の割る数(右側の数字)は
固定された数字でなければ機能せず、
vwのように可変する単位は使えないようです。
となると、jsで制御したほうが早いなと思いまして、
冒頭にあげたスクリプトを組みました。
ここで気にしなければならないのは、
ブラウザ別の表示対応です。
can i use…
clampをcan i use… にて
対応ブラウザを調査すると、下記のような結果がでました。
4/20現在、割と色んなブラウザに対応しているみたいです。
しかし、ieだけはどうしても…
ieまで全て含めてリキッド対応するのは厳しいので、
ieだけは上記スクリプトを対応させないようにします。
あとは、スクリプトのコメント通り。
u-fzというクラスに対して、
最大値、推奨値、最小値を取得し、
styleプロパティにて適用するだけです。
この場合、css側で設定したfont-sizeがそのまま最大値となり、
推奨値がそれに対応したvwの値、
最小値が最大値の1/2という設定にしております。
ここら辺の設定はガイドラインやレイアウトに合わせて
変えてもらって大丈夫と思います。
まとめ
まとめると、冒頭のスクリプトを使用して
cssに最大値となるfont-sizeを設定し、
可変させたいテキストにクラスu-fzをつけると、
ちょうどよくどんな画面サイズでも良い感じの
大きさでテキストが表示されます。
お試しあれ！
今回は技術的な記事になりましたが、
弊社のコラムは他にもマーケティングや通販など、
様々な分野に特化した記事を毎月掲載しております。
是非是非、ご覧ください〜
また、弊社では随時ホームページの運用・制作や通販モデルについてご相談を承っております。
どんな些細なことでも構いませんので、もしweb制作やサイト運営にお困りでしたら、
是非お問い合わせ頂ければと思います。
