CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Post on:2022年1月31日
sponsors
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。
CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。
最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。
Modern Fluid Typography Editor
Modern Fluid Typography Editor -GitHub
Modern Fluid Typography Editorの特徴
流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新のテクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイズに応じた最適な値をレンダリングさせることができます。
CSSは、下記のようになります。
|
1 2 3 |
p{ font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); } |
このたった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の使い方
使い方は、簡単です。
コードはGitHubに公開されているので、インストールもできます。ここではオンライン版で紹介します。
Modern fluid typography editor
まずは、ベースのフォントサイズ、最小値と最大値を設定します。
「Fluid size」は変更速度です。値が正の場合はスクリーン幅が大きくなるにつれて、最終的な値が最小値から最大値まで増加します。値が負の場合は最終的な値が画面幅が大きくなるにつれて最大値から最小値へと減少します。
「Relative size」ブラウザのデフォルトのルートフォントサイズは16pxです。 この値は通常、ユーザー補助の目的で、ユーザーがブラウザ設定で変更できます。 フォントサイズがpx値にロックされないようにし、ユーザーのフォントサイズ設定をサポートするには、正または負の「rem」値を含める必要があります。
ベースのフォントサイズ、最小値と最大値を設定
設定が完了すると、さまざまなスクリーンサイズでフォントサイズがどのようになるか確認できます。
ホバーすると、スクリーンサイズとフォントサイズが表示されます
「Table」をクリックすると、特定のスクリーンサイズの流動的なフォントサイズのより詳細な値を確認できます。スクリーンサイズは、上の「+」から簡単に追加できます。
スクリーンサイズとフォントサイズの表
sponsors
