2025年7月アーカイブ

CSS:可変するフォントサイズ指定(改良版)

CSS:フォントサイズのvw指定を少し楽にする書き方 で書いた、ブラウザ幅に対して可変するフォントサイズの指定を少し改良したので覚書です。

font-size: clamp(
    calc(30px * 0.75), /* 最小0.75倍 */
    calc(100vw / (375 / 30)), /* 画面幅375pxのときに30px */
    calc(30px * 1.5) /* 最大1.5倍 */
);

変更点は最小/最大サイズを追加したことです。

ブラウザサイズによっては小さく/大きくなりすぎてしまったり、特にPCでは際限なく大きくなってしまうのを回避することができます。

ごちゃっとしていますが数字的には以下の2種類だけなので、対応する数字だけ変更すれば使うことができます。

・ブラウザ幅「375」pxのときに

・フォントサイズ「30」px相当になるように可変

最大最小の指定は計算しなくて良いように倍率にしていますが、固定値でももちろん良いと思います。

このアーカイブについて

このページには、2025年7月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2025年3月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。