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

レスポンシブ対応で、可変の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()を使った数式で生成します。

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

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

サイトのキャプチャ

Fluid-responsive font-size calculator

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

サイトのキャプチャ

最初は、「px」で始める

計算機の使用手順

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

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

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

フォントサイズが期待通りに動作するかは、「Test window」で確認できます。

サイトのキャプチャ

フォントサイズの動作を確認

sponsors

top of page

©2020 coliss