CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール

Post on:2020年5月22日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。

スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。
font-sizeは自由に定義できるので、日本語のフォントでも最適に利用できます。

Fluid-responsive font-size calculator

Fluid-responsive font-size calculatorは、レスポンシブ対応のfont-sizeを可変にするスタイルシートもこの計算機で簡単に生成できます。font-sizeは最小値と最大値を決め、その間のサイズはcalc()関数でスムーズに変更させます。例えば、スマホなどの小さいスクリーンでは16px（最小値）に、ワイドスクリーンでは24px（最大値）に、その間のスクリーンサイズに応じて変化するサイズにします。

font-sizeをこの計算機では、calc()を使った数式で生成します。

font-size  = calc(ZZ + ((1vw - XX) * YY))

XX = viewport_Width_Minimum / 100
YY = 100 * font_Size_Difference / viewport_Width_Difference
ZZ = Minimum font-size stated in REM

font-size = calc(ZZ + ((1vw - XX) * YY))

XX = viewport_Width_Minimum / 100

YY = 100 * font_Size_Difference / viewport_Width_Difference

ZZ = Minimum font-size stated in REM

calc()関数については、以前の記事をご覧ください。

知っていると便利な「calc()関数」の使い方のまとめ -レイアウト・要素の配置・フォントサイズの定義など

使い方は簡単です。サイトにアクセスします。

Fluid-responsive font-size calculator

最初に、font-sizeに使用する単位を決めます。

最初は、「px」で始める

計算機の使用手順

「Units」で、font-sizeに使用する単位を決めます。通常、理解を助けるために「px」から始めてください。
「Selector」で、要素、クラス名、IDなど任意のセレクタを使用できます。
「Property」は通常は「font-size」で。width, paddingなども使用できます。
「Range」で、「Property」（font-size）の範囲の最小値から最大値を指定します。例えば、16pxと24pxなど。
「Viewport」で、ビューポートの範囲の最小値から最大値を指定します。例えば、768pxと1920pxなど。
「CSS method」で、CSSメソッドを選択します。「End query」は、最もサポートされている方法であるため、お勧めします。
「Options」は、コメントの有無、Safariのサイズ変更修正（推奨）です。
ブラウザを最大限にサポートするために、「Units」を「rem」にします。
最後に「Copy CSS」ボタンをクリックして、自分のCSSファイルにペーストしてご利用ください。

最後に「rem」にして書き出す

上記の設定で生成されたCSSは、下記の通りです。

/* 1rem(16px) @ 48rem(768px) increasing to 1.5rem(24px) @ 120rem(1920px) */
/* Ems strongly recommended on media queries! */
@media (min-width: 48em) {
  :root {
    font-size: calc(1rem + ((1vw - 0.48rem) * 0.6944));
    /* Note: The base value (1rem) must be stated in rem to maintain accessibility */
    /* Where: 0.6944 = 100 * font-size_Difference / viewport_Width_Difference */

    /* Safari resize fix */
    min-height: 0vw;
  }
}
/* Prevent scaling beyond this breakpoint */
@media (min-width: 120em) {
  :root {
    font-size: 1.5rem;
  }
}