ホームページ成績上げ屋さんです!

ホームページ成績

上げ屋さんです!

リキッドレイアウトでフォントサイズをうまく表示する方法 | ニッティ・グリッティとはマーケティングweb戦略デザイン美容室向け記事 | お役立ち情報 | 岡山のホームページ制作会社。WEB戦略が得意なホームページ成績上げ屋さん!

NITTY GRTTY
NITTY GRITTY

お役立ち

ニッティ・グリッティの

お役立ち情報

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

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; 


}









無料診断

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

tel

お問い合わせ

tel


086-959-4456

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

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
    お役立ち情報

ホームページ改善勉強会プロ経営者トレーニング交流会毎月テーマを変えて懇親会費用だけでまるっと回収
© 2025 NITTY GRITTY All Rights Reserved.
  • tline
  • tfacebook
  • tinst
  • tyoutube
無料診断バナー無料診断バナー