こんにちは！静岡県浜松市でホームページ制作をしているフリーランスWEBデザイナーのこたです。
皆さんはWeb制作でコーディングをする際にCSSでフォントサイズを設定されると思いますが、その際に設定するフォントサイズの単位は何を使っていますか
「px」「rem」「pt」「em」「%」「vw」「vh」など様々な単位があります。
昔はPCサイトがメインだったため「px」単位指定をしていましたが、時代は変わりました。
今ではスマホでのWebサイト視聴が主流になったことで、レスポンシブ対応が当たり前になりました。
その流れにより、「px」単位で指定をするとデザインを崩さないためにメディアクエリでのフォントサイズが複数設定しなければいけなくなります。
これは手間になりますよね。
そこで今回はレスポンシブでも調整をしなくていいように、ラクにコーディングできるフォントサイズについてご紹介します。
レスポンシブ対応フォントサイズプロパティ「clamp()」
さっそくですが結論を言います。
それは「clamp()」関数を使うことです。
あまり馴染みのない関数ですが、これを覚えておくとコーディングがすごく速く作業できるのでぜひ覚えておきましょう。
See the Pen
Untitled by こた@WEBデザイナー (@kota_webdesign)
on CodePen.
clamp()関数とは？
clamp()関数とは指定したいフォントサイズ(推奨値)を指定しながら、最小値と最大値を定めることができる関数になります。
例えば上記デモでは
h1{
font-size:clamp(20px, 2.6vw, 36px);
}
「2.6vw」が推奨値となり、指定したいフォントサイズになります。
「20px」が最小値となり、「36px」が最大値になります。
つまり「2.6vw」のフォントサイズだけど、「20px」以下にはならずに、「36px」以上にもしたくないという指定になります。
最小値と最大値を定めてないと「2vw」だけでは画面サイズによって、文字がはみ出たりするなどデザインが崩れる原因になるので、最小値と最大値を指定することは大切です。
clamp()指定値の設定基準
では、上記の「2.6vw」はどうやって決めたのか？
それは計算式があります。
上記計算式で当てはめていきましょう。
「20px」（最小のフォントサイズ）÷「768px」(レスポンシブ メディアクエリ 768px ) ✕ 100 = 2.6...
このように計算をすることができます。
clamp()関数で設定するのに便利なサービス
設定方法をご紹介しましたが、計算をするのは面倒ですよね。
計算式も忘れてしまいそうです。
そんなときに便利なサービスがあります。
Min-Max-Value Interpolation
Min-Max Calculatorは計算式を使わずに自分の設定したい数値が一瞬で分かる無料サービスになります。
使い方は、とても簡単です。
最初に使用する単位（px or rem）を決めて、最小値と最大値を決めます。次に、ビューポートの最小値と最大値を決めると、CSSが自動生成されます。
まとめ
- 【CSS設定】font-size: clamp(最小値,推奨値,最大値);
- 【計算式】最小のフォントサイズ ÷ 最小のフォントサイズで止める画面サイズ ✕ 100 = vwの値
- 【便利サービス】Min-Max Calculator
clamp関数を使うとレスポンシブ対応がラクになり、作業スピードも格段に上がります。
もっと作業効率を良くしたいとお悩みでしたら、ぜひclamp()関数でCSS設定をしてみてください。
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
