リキッドレイアウトでフォントサイズをうまく表示する方法 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん!

NITTY GRTTY
NITTY GRITTY

お役立ち

ニッティ・グリッティの

お役立ち情報

リキッドレイアウトでフォントサイズをうまく表示する方法

UPDATE :

投稿者 : AOKI CHISHIO

aoki_icon

リキッドレイアウト、めんどうですよね。

フォントサイズが小さくなりすぎたり逆に大きくなりすぎたり、


かといってレイアウトをメディアクエリで切り替えるのも面倒ですよね。


なんとかならないかな、と思っていたらcss-tricksでこんな記事がありました。

https://css-tricks.com/how-to-get-a-pixel-perfect-linearly-scaled-ui/


今回もゆっくり読み込んでいきましょう


まず前段です。


相対表示(%とかemとか)を利用して動的なスケーリングをおこなっても
ピクセルパーフェクトには程遠く、拡大縮小のすると、テキストの折り返しやレイアウトのずれが生じるとの指摘があります。


たしかにありますよね。


デザインやレイアウトの変更なしに、一律に拡大縮小する方法があるのか、という疑問に対し、二つの回答を用意しています。

1つ目は cssトランスフォームで拡大縮小する方法。

そして、2つ目が今回紹介する別のやりかたです。


今回のやりかたでは、まず、かっちり決めたい組み合わせを決めます。

今回の例では、画面幅1600pxに対して、文字16pxを基準にしています。


そして下記のようにCSS変数を設定します


--ideal-viewport-width: 1600; 理想の画面幅(pxはつけない)
--current-viewport-width: 100vw; 現在の画面幅
--ideal-font-size: 16; 理想のフォントサイズ(pxはつけない)


現在の画面幅を100vwで取得しています

そして、font-sizeを下記のように設定すると・・・・


font-size: calc(
var(--ideal-font-size) * (var(--current-viewport-width) / var(--ideal-viewport-width)


現在の画面幅に応じたフォントサイズに自動で調整されます!


たとえば、現在の画面幅(=100vw)が、1300pxであれば、

フォントサイズは16 * 1300px / 1600 = 13pxになります


このやり方であれば、レイアウトはそのままで拡大縮小可能です。


けれどたとえば、画面幅が200pxとか、5000pxになった場合、

画面幅に連動していると、文字が小さすぎたり、大きくなりすぎたりします。


それを解消するために、CSSのclump関数を利用しています


--ideal-viewport-width: 1600; 理想の画面幅
--current-viewport-width: 100vw; 現在の画面幅
--min-viewport-width: 350px; 最小の画面幅
--max-viewport-width: 3840px; 最大の画面幅
--ideal-font-size: 16; 理想のフォントサイズ
--clamped-viewport-width: clamp(var(--min-viewport-width), var(--current-viewport-width), var(--max-viewport-width);

クランプした画面幅

clamp(MIN,VAL,MAX)

MIN以下をMINで設定した値に、MAX以上をMAXで設定した値にして、その間は現在の画面幅(100vw)にします。


そして、--current-viewport-widthを--clamped-viewport-widthに変えることで、フォントサイズの上限、下限を指定しています


font-size: calc(
var(--ideal-font-size) * var(--clamped-viewport-width) / var(--ideal-viewport-width)


つまり、幅5000pxのデバイスでウェブアプリを開いた場合、レイアウトは3840pxに固定されるということですね。


よくできていますね!


ただし、注意すべき点としては、基本的にレイアウトそのままで拡大縮小するので、ズームが効かなくなるようです。


その解決方法としてはメディアクエリを利用するようです。つまり、--ideal-viewport-widthと--ideal-font-sizeの設定値を

メディアクエリで切り替えるようにします。


--ideal-viewport-width: 500; 理想の画面幅

--ideal-font-size: 24; 


@media (min-width: 64em) {

--ideal-viewport-width: 800; 理想の画面幅

--ideal-font-size: 42; 


}









無料診断

現状のHPを無料で診断いたします。
お気軽にお問い合わせください。

tel

お問い合わせ

tel


086-959-4456

受付時間 10:00〜17:00定休日/土日・祝日

BLOG

お役立ち情報

© 2021 NITTY GRITTY All Rights Reserved.
WEB GROW
WEB戦略を成功させる
システムできました。

自社で驚くほど簡単に更新・運用ができる!

セキュリーティー万全なWEBの内製化システム

ホームページ改善勉強会 ホームページ改善勉強会 ホームページで失敗しないためのノウハウをセミナー限定で完全公開
© 2021 NITTY GRITTY All Rights Reserved.
無料診断バナー 無料診断バナー