[CSS]レスポンシブ対応のフォントサイズの指定方法 -デスクトップやスマホのビューポート幅(vw)に対して文字サイズを変化させる

CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅(vw)に対して自動で変化させるスタイルシートの記述を生成するオンラインツールを紹介します。

例えば、768px以下はすべて1rem、1920px以上は2rem、その間はvwに対して変化する、という指定が簡単にできます。

レスポンシブ対応のフォントサイズの指定方法

Responsive font calculator

先日、紹介した「ビューポート幅(vw)に対してレスポンシブ対応の文字サイズを指定するテクニック」のスタイルシートを自動で生成します。
ゼロからスタイルシートを記述すると、計算が面倒ですが、これなら超簡単です。

サイトのキャプチャ

Responsive font calculator

ツールの使い方は、簡単です。

  1. Units
    フォントのサイズ指定に使う単位を「px, rem, em」から選択。
  2. Selector
    「font-size」を適用するセレクタを記述(id, class など)。
  3. Font-size
    フォントが拡大縮小する範囲を指定。
  4. Viewport width
    フォントのサイズに対応するビューポート幅を指定。
  5. Options
    コメントの有無、サイズの最大値を超えないように指定

スタイルシートは、下記のように生成されます。

実際にフォントのサイズがどのように適用されるかは、「Test window」をクリックすると、別ウインドウで表示されます。

デモのキャプチャ

ビューポート幅に対して、フォントのサイズが変化するデモ

フォントのサイズが変化するデモ

このテクニックは、emまたはremでサイズ指定したオブジェクトにも適用できます。
Flexboxでレイアウトされたデモページでご確認ください。

サイトのキャプチャ

Flexboxでレイアウトされたデモページ

サイトのキャプチャ

デモページ
CodePenでは、コードをいろいろ変更して試すこともできます。

sponsors

top of page

©2018 coliss