CSSの便利ツールが登場! レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor

Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-size最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。

CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。

最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。

CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツール

Modern Fluid Typography Editor
Modern Fluid Typography Editor -GitHub

Modern Fluid Typography Editorの特徴

流体タイポグラフィ(Fluid Typography)は、フォントサイズをレスポンシブ対応にする最新のテクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイズに応じた最適な値をレンダリングさせることができます。

CSSは、下記のようになります。

このたった1行のCSSで、下記のように表示されます。
※ルート要素が、16pxの場合

  • 360pxのスクリーン: 1.5rem 24px
  • 480pxのスクリーン: 1.625rem 26px
  • 768pxのスクリーン: 1.938rem 31px
  • 980pxのスクリーン: 2.25rem 36px
  • 1280pxのスクリーン: 2.25rem 36px

CSSのclamp()関数は、2つの定義された値(最小値と最大値)の間をクランプします。3つのパラメーター(最小値、推奨値、最大値)を使用でます。上記のCSSでは、最小値は1.5rem、推奨値は2vw + 1rem、最大値は2.25remになります。

clamp()関数について詳しくは、下記ページをご覧ください。

Modern Fluid Typography Editorでは、このCSSを自分用にカスタマイズして簡単に生成できます。

Modern Fluid Typography Editorのキャプチャ

ベースのフォントサイズ、最小値や最大値も簡単に設定でき、さまざまなスクリーンサイズでどのサイズで表示されるかも確認できます。

Modern Fluid Typography Editorの使い方

使い方は、簡単です。
コードはGitHubに公開されているので、インストールもできます。ここではオンライン版で紹介します。

サイトのキャプチャ

Modern fluid typography editor

まずは、ベースのフォントサイズ、最小値と最大値を設定します。
「Fluid size」は変更速度です。値が正の場合はスクリーン幅が大きくなるにつれて、最終的な値が最小値から最大値まで増加します。値が負の場合は最終的な値が画面幅が大きくなるにつれて最大値から最小値へと減少します。

「Relative size」ブラウザのデフォルトのルートフォントサイズは16pxです。 この値は通常、ユーザー補助の目的で、ユーザーがブラウザ設定で変更できます。 フォントサイズがpx値にロックされないようにし、ユーザーのフォントサイズ設定をサポートするには、正または負の「rem」値を含める必要があります。

Modern Fluid Typography Editorのキャプチャ

ベースのフォントサイズ、最小値と最大値を設定

設定が完了すると、さまざまなスクリーンサイズでフォントサイズがどのようになるか確認できます。

Modern Fluid Typography Editorのキャプチャ

ホバーすると、スクリーンサイズとフォントサイズが表示されます

「Table」をクリックすると、特定のスクリーンサイズの流動的なフォントサイズのより詳細な値を確認できます。スクリーンサイズは、上の「+」から簡単に追加できます。

Modern Fluid Typography Editorのキャプチャ

スクリーンサイズとフォントサイズの表

sponsors

top of page

©2022 coliss