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;

}

メディアクエリ

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

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

max-width

Style範囲

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

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

.tag {

font-size: 18px;

}
@media (max-width: 999px) {

.tag {

font-size: 14px;

}

}

min-width

Style範囲

Style範囲

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

「max-width」時とは反対に「459px」以下の大きさの時はCSSスタイルは上書きされません。

画面が大きくなった時にCSSスタイルを上書きするようなイメージになります。

.tag {

font-size: 18px;

}
@media (min-width: 460px) {

.tag {

font-size: 14px;

}

}

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

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

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

レスポンシブ対応のやり方

X: 画面サイズ

Y: 文字サイズ

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

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

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

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

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

   }

   }