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

• 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;

    }

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

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)になります。

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

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);

   }
   }