現在ではレスポンシブデザインが当たり前になっています。
フォントサイズはどうでしょう?
画面の大きさでフォントサイズを分けて設定していませんか?
今回はフォントサイズは自動で調節するようにするテクニックを紹介します。
現在ではレスポンシブデザインが当たり前になっています。
フォントサイズはどうでしょう?
画面の大きさでフォントサイズを分けて設定していませんか?
今回はフォントサイズは自動で調節するようにするテクニックを紹介します。
まずは文字サイズの変更とメディアクエリのおさらいをしましょう。
文字サイズのレスポンシブ対応で重要になる部分です。
すでにわかってる方はスクロールして飛ばしてください。
小さなヒツジ
大きなヒツジ
文字の大きさの変えるには「font-size」というプロパティを使います。
「font-size」に指定する値は固定値「px」または「rem」で大きさを指定します。
パソコンやスマホの画面はドットと呼ばれる小さなブロックが集まって文字や画像を表示しています。
その小さなブロックが「1px」になります。
「px」で指定された大きさは画面サイズに関わらず、固定値で指定されます。
「rem」は比較的新しい単位で、倍率で指定することが出来ます。
font-sizeの初期値は「16px」なので、16pxの1倍の大きさが「1rem」になります。
例えば「0.5rem」と指定した場合は「8px」になり、「1.5rem」と指定した場合は「24px」になります。
次はメディアクエリの使い方です。
メディアクエリを使って文字サイズを変えてみましょう。
メディアクエリはブラウザの大きさごとにリアルタイムでCSSを変更してくれます。
ブラウザの大きさは「px」で判断されます。
下記のようにCSSを書いた場合、画面(ブラウザ)の大きさが「999px」以下の時に、フォントサイズを上書きして適用します。
画面(ブラウザ)が「999px」以下の時は、フォントサイズを「14px」に上書きします。
以上が文字サイズとメディアクエリの簡単な使い方でした。
もしピンと来なかったら、このサイトの「CSS 基本編」「CSS 中級編」を覗いてみて下さい。
それでは本題の文字サイズのレスポンシブ対応をしていきましょう。
文字サイズのレスポンシブ対応をしていきます。
この方法は、数学の「一次関数」の式を使います。
まずは「一次関数」について少し解説しますね。
一次関数は直線のグラフが出来る関数です。
X軸の値が大きくなると、Y軸の値も大きくなる比例の式です。
一次関数の式を使うことで、文字サイズのレスポンシブ対応が可能になります。
一次関数のXの値を「画面サイズ」にYの値を「文字サイズ」に置き換えて計算します。
さらに2点の座標から直線の式を求める連立方程式を使って、一次関数の式を求めます。
導き出した一次関数の式が、文字サイズのレスポンシブ対応を可能にしています。
連立方程式は2点の座標から直線の式を求める方法です。
この場合の2点は、スマホとパソコンの画面サイズです。
スマホの最小の画面サイズ(横幅)は「320px」とされています。
画面サイズが「320px」の時、文字サイズは「16px」になるように計算します。
座標に置き換えた場合は(X,Y) = (320,16)になります。
パソコンの画面サイズ(横幅)は「1440px」を基準にします。
パソコンの画面サイズはさまざまなので、今回は「1440px」にしています。
画面サイズが「1440px」の時、文字サイズは「24px」になるように計算します。
座標に置き換えた場合は(X,Y) = (1440,24)になります。
連立方程式を使って一次関数の式を作成します。
その一次関数の式を使って、文字サイズのレスポンシブ対応を可能します。
それでは、実際に計算してみましょう。
画面サイズごとに文字サイズが変化する式を、連立方程式を使って求めます。
1スマホと2パソコンの画面サイズを基準にして、直線の式を求めます。
1の式を、bの式に変換する。
bの式に変換した1の式を、2の式に代入する。
aの値を求める。
aの値を1の式に代入してbを求める。
直線の公式「y = ax + b」に、aとbの値を代入する。
Xの値は画面サイズ(横幅)の最大の大きさ「100vw」に置き換えて文字サイズを指定します。
CSSのcalc関数を使って、HTML全体の文字サイズを変更するように指定します。
その際に、足し算・引き算の数値に「px」の単位を追加します。
ひとつ前のステップで文字サイズのレスポンシブ対応は完成しました。
あとは要素ごとに「rem」で大きさを指定することで、細かく設定することが出来ます。
メディアクエリを使って、文字サイズのレスポンシブ対応の範囲を指定することが出来ます。
例えば、画面サイズが「1440px」を超える時は、フォントサイズを固定したい時があるとします。
そんな時は、下記のようにメディアクエリを使って「1440px」以下になった時にレスポンシブ対応をします。
Safariだけは画面サイズをリサイズしても、文字サイズは変わりません。
Safariにはリサイズしても、「vw」の大きさが再計算されないバグがあるからです。
再計算がされないバグは、意図的に再計算するようにして回避が可能です。
「1秒」ごとにアニメーションをさせて、意図的に再描画されるようにします。
「1秒」ごとに「z-index」プロパティを更新して再描画を促します。
以上で文字サイズのレスポンシブ対応は終了です。
少し理解するのにハードルが高いかも知れません...。
ですが、柔軟に文字サイズが変更可能なのでデザイン面ではとても使えそうですね。