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


お役立ち
ニッティ・グリッティの
お役立ち情報
リキッドレイアウトでフォントサイズをうまく表示する方法
UPDATE :
投稿者 : ニッティ・グリッティ

リキッドレイアウト、めんどうですよね。
フォントサイズが小さくなりすぎたり逆に大きくなりすぎたり、
かといってレイアウトをメディアクエリで切り替えるのも面倒ですよね。
なんとかならないかな、と思っていたら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;
}
BLOG
お役立ち情報
-
雑に選んでいませんか?フォントでデザインに表情をつけよう!
2024.12.03
CATEGORY
お役立ち情報 -
【初心者さん必見!】使えると超おしゃれ!「ブレンドツール」とは!~イラレの便利機能紹介Part6~
2024.12.02
CATEGORY
お役立ち情報 -
テンプレートで簡単!?もう悩まないプレゼン資料作成!
2024.11.28
CATEGORY
お役立ち情報 -
ホームページ集客のコツとは?コンサルティング会社が紹介!
2023.08.21
CATEGORY
お役立ち情報 -
IT導入補助金のご案内
2023.08.07
CATEGORY
お役立ち情報 -
【3分でわかる】Threads(スレッズ)とは?登録方法やTwitterとの違いをご紹介
2023.07.07
CATEGORY
お役立ち情報