Webデザインの教科書
- Font Size -
Scroll

CSSだけでレスポンシブ対応font-sizeを画面に合わせて自動で変える

現在ではレスポンシブデザインが当たり前になっています。

フォントサイズはどうでしょう?

画面の大きさでフォントサイズを分けて設定していませんか?

今回はフォントサイズは自動で調節するようにするテクニックを紹介します。

まずは文字サイズの変更とメディアクエリのおさらいをしましょう。

文字サイズのレスポンシブ対応で重要になる部分です。

すでにわかってる方はスクロールして飛ばしてください。

文字サイズを変える

<p class="text-small">
小さなヒツジ
</p>
<p class="text-big">
大きなヒツジ
</p>
.text-small {
font-size: 14px;
}
.text-big {
font-size: 2rem;
}

小さなヒツジ

大きなヒツジ

文字サイズを変える
  • font-size

    文字の大きさの変えるには「font-size」というプロパティを使います。

    「font-size」に指定する値は固定値「px」または「rem」で大きさを指定します。

    • px (固定値)
      A
      font-size: 5px

      パソコンやスマホの画面はドットと呼ばれる小さなブロックが集まって文字や画像を表示しています。

      その小さなブロックが「1px」になります。

      「px」で指定された大きさは画面サイズに関わらず、固定値で指定されます。

      ドットの大きさはHDや4Kなどの解像度によって大きさが変わります。
    • rem (可変値)
      1rem = 16px

      rem」は比較的新しい単位で、倍率で指定することが出来ます。

      font-sizeの初期値は「16px」なので、16pxの1倍の大きさが「1rem」になります。

      例えば「0.5rem」と指定した場合は「8px」になり、「1.5rem」と指定した場合は「24px」になります。

      「0.5rem」は「.5rem」の書き方でも可能です。
      /* 16px */
      p {
      font-size: 1rem;
      }
      /* 8px */
      p {
      font-size: .5rem;
      }
      /* 24px */
      p {
      font-size: 1.5rem;
      }

次はメディアクエリの使い方です。

メディアクエリを使って文字サイズを変えてみましょう。

メディアクエリを使う

<div class="tag">
画面の大きさでフォントサイズが変わる
</div>
.tag {
font-size: 18px;
width: 450px;
padding: 15px 5px;
background: #f5f5f5;
}
@media (max-width: 999px) {
.tag {
font-size: 14px;
}
}
メディアクエリ
  • メディアクエリ

    メディアクエリはブラウザの大きさごとにリアルタイムでCSSを変更してくれます。

    ブラウザの大きさは「px」で判断されます。

    • max-width
      Style範囲

      下記のようにCSSを書いた場合、画面(ブラウザ)の大きさが「999px」以下の時に、フォントサイズを上書きして適用します。

      画面(ブラウザ)が「999px」以下の時は、フォントサイズを「14px」に上書きします。

      .tag{
      font-size: 18px;
      }
      @media (max-width: 999px) {
      .tag{
      font-size: 14px;
      }
      }

以上が文字サイズとメディアクエリの簡単な使い方でした。

もしピンと来なかったら、このサイトの「CSS 基本編」「CSS 中級編」を覗いてみて下さい。

それでは本題の文字サイズのレスポンシブ対応をしていきましょう。

文字サイズのレスポンシブ対応をしていきます。

この方法は、数学の「一次関数」の式を使います。

まずは「一次関数」について少し解説しますね。

一次関数を利用する

一次関数

一次関数は直線のグラフが出来る関数です。

X軸の値が大きくなると、Y軸の値も大きくなる比例の式です。

一次関数の式を使うことで、文字サイズのレスポンシブ対応が可能になります。

  • レスポンシブ対応のやり方
    X: 画面サイズ
    Y: 文字サイズ

    一次関数のXの値を「画面サイズ」にYの値を「文字サイズ」に置き換えて計算します。

    さらに2点の座標から直線の式を求める連立方程式を使って、一次関数の式を求めます。

    導き出した一次関数の式が、文字サイズのレスポンシブ対応を可能にしています。

    連立方程式
    • 16 = 320a + b
    • 24 = 1440a + b

    連立方程式は2点の座標から直線の式を求める方法です。

    この場合の2点は、スマホとパソコンの画面サイズです。

    • スマホの画面サイズ

      スマホの最小の画面サイズ(横幅)は「320px」とされています。

      画面サイズが「320px」の時、文字サイズは「16px」になるように計算します。

      座標に置き換えた場合は(X,Y) = (320,16)になります。

    • パソコンの画面サイズ

      パソコンの画面サイズ(横幅)は「1440px」を基準にします。

      パソコンの画面サイズはさまざまなので、今回は「1440px」にしています。

      画面サイズが「1440px」の時、文字サイズは「24px」になるように計算します。

      座標に置き換えた場合は(X,Y) = (1440,24)になります。

連立方程式を使って一次関数の式を作成します。

その一次関数の式を使って、文字サイズのレスポンシブ対応を可能します。

それでは、実際に計算してみましょう。

文字サイズの計算

<h1>
フォントサイズのレスポンシブ対応
</h1>
<p>
CSSだけでフォントサイズを変更します。
</p>
html {
font-size: calc((100vw - 320px) / 140 + 16px);
}
body {
font-size: 1rem;
}
文字サイズの計算
  • 16 = 320a + b
  • 24 = 1440a + b
(X,Y) = (320,16)
(X,Y) = (1440,24)

画面サイズごとに文字サイズが変化する式を、連立方程式を使って求めます。

1スマホと2パソコンの画面サイズを基準にして、直線の式を求めます。

  1. 連立方程式で直線の式を求める
    • 16 = 320a + b
    • 24 = 1440a + b

    1の式を、bの式に変換する。

    b = -320a + 16

    bの式に変換した1の式を、2の式に代入する。

    24 = 1440a + (-320a + 16)

    aの値を求める。

    24 - 16 = 1440a - 320a
    8 = 1120a
    a=

    aの値を1の式に代入してbを求める。

    16 = 320 × + b
    b= - + 16

    直線の公式「y = ax + b」に、aとbの値を代入する。

    y = x + (- + 16)
    y = x - + 16
    y = + 16
  2. 直線の式をCSSに置き換える
    X: 画面サイズ100vw
    Y: 文字サイズpx

    Xの値は画面サイズ(横幅)の最大の大きさ「100vw」に置き換えて文字サイズを指定します。

    CSSのcalc関数を使って、HTML全体の文字サイズを変更するように指定します。

    その際に、足し算・引き算の数値に「px」の単位を追加します。

    html {
    font-size: calc((100vw - 320px) / 140 + 16px);
    }
  3. 要素ごとに文字サイズを指定する

    ひとつ前のステップで文字サイズのレスポンシブ対応は完成しました。

    あとは要素ごとに「rem」で大きさを指定することで、細かく設定することが出来ます。

    body {
    font-size: 1rem;
    }
    ul {
    font-size: 1.2rem;
    }
    p {
    font-size: .9rem;
    }
  4. メディアクエリで範囲を決める
    Style範囲

    メディアクエリを使って、文字サイズのレスポンシブ対応の範囲を指定することが出来ます。

    例えば、画面サイズが「1440px」を超える時は、フォントサイズを固定したい時があるとします。

    そんな時は、下記のようにメディアクエリを使って「1440px」以下になった時にレスポンシブ対応をします。

    html {
    font-size: 24px;
    }
    @media (max-width: 1440px) {
    html {
    font-size: calc((100vw - 320px) / 140 + 16px);
    }
    }
Safariはうまく動かない

Safariだけは画面サイズをリサイズしても、文字サイズは変わりません

Safariにはリサイズしても、「vw」の大きさが再計算されないバグがあるからです。

  • 解決策

    再計算がされないバグは、意図的に再計算するようにして回避が可能です。

    「1秒」ごとにアニメーションをさせて、意図的に再描画されるようにします。

    「1秒」ごとに「z-index」プロパティを更新して再描画を促します。

    _::-webkit-full-page-media, _:future, :root, body {
    -webkit-animation: safariFix 1s forwards infinite;
    }
    @-webkit-keyframes safariFix {
    100% {
    z-index: 1;
    }
    }

以上で文字サイズのレスポンシブ対応は終了です。

少し理解するのにハードルが高いかも知れません...。

ですが、柔軟に文字サイズが変更可能なのでデザイン面ではとても使えそうですね。