レスポンシブ対応で便利な流動フォントサイズ

2022.03.10 2022.07.29

Webサイトのレスポンシブ対応で、メディアクエリなどを使いモバイルとデスクトップのフォントサイズを指定する場合があります。その際、モバイルとデスクトップの間のフォントサイズを流動的にしたい場合のmixinです。

clamp()を利用していますが、min()max()を使っても同じ結果を得られます。

clamp()はCSSの関数で、上限値と下限値の範囲において、値を適用することができます。

clamp(最小値, 推奨値, 最大値);
@use "sass:math";
@use "sass:map";

$breakpoints: (
  'mobile' : 480px,
  'desktop' : 1200px,
) !default;

// Responsive font size
@mixin rsfontsize($fontsize, $fontsize-l) {
    font-size: clamp( #{$fontsize * 1px}, ( #{$fontsize * 1px} + (( 100vw - #{map.get($breakpoints, mobile)} ) * (( #{$fontsize-l} - #{$fontsize} ) / ( #{num(map.get($breakpoints, desktop))} - #{num(map.get($breakpoints, mobile))} )))), #{$fontsize-l * 1px} );
}
// strip units helper function
@function num($input){
  @return math.div( $input, ($input * 0 + 1) );
}
※clamp()、min()、max()などの関数の中ではcalc()の記述はいらないようでした。
p {
  @include rsfontsize(16, 24);
}

この指定だけで、下記のようになるので楽ちんです。

  • 画面幅:〜480px → フォントサイズ:16px
  • 画面幅:480px 〜 1200px → フォントサイズ:流動
  • 画面幅:1200px〜 → フォントサイズ:24px

IEはclamp()に対応していないので、フォントサイズが適用されないということが起こります。
なので、IEにも対応しているmax()min()で書けば大丈夫かなと思ったのですがうまく表示されませんでした。

なので、対応策としてIE用にdesktop用のfont-sizeを追加しておくと良いかもしれません。

// Responsive font size
@mixin rsfontsize($fontsize, $fontsize-l) {
  font-size: #{$fontsize-l * 1px}; // IE用
  font-size: max( #{$fontsize * 1px}, min( ( #{$fontsize * 1px} + (( 100vw - #{map.get($breakpoints, mobile)} ) * (( #{$fontsize-l} - #{$fontsize} ) / ( #{num(map.get($breakpoints, desktop))} - #{num(map.get($breakpoints, mobile))} )))), #{$fontsize-l * 1px}) );
}
※clamp()、min()、max()などの関数の中ではcalc()の記述はいらないようでした。

推奨値をvw指定するなどの方法は色々な記事を拝見しながら試してはみたのですが、思ったような結果が得られず。。。あきらめずに調べていくうちに下記「参考」のCodePenや記事に辿り着き、それをもとに自分用のmixinを作ってみました。

今回は紹介していませんが、こちらのmixinを利用して、WordPress 5.8から実装されたtheme.json>settings > typography > fontsizesで作られるフォントサイズを流動フォントサイズに対応したりしています。

同じように上限・下限があり流動的にサイズを変化させたいところで使えそうです。

Share this!
この記事を書いた人
今西 昭男
フリーランスのディレクター兼WEBサイト制作者です。
WordPressを使った制作やECサイトの構築などお気軽にご相談ください。
岐阜市登録市民団体 Shift

岐阜市登録市民団体 Shift

岐阜市民に対し、Web技術を通じてスキルの向上や習得のサポート、それらを活用した情報発信技術の習得や向上をサポートすることを目的とし活動しています。副代表をしています。

Gifu WordPress Meetup

Gifu WordPress Meetup

Gifu WordPress MeetupはWordPressに興味がある方のための地域コミュニティです。運営スタッフをしています。

CoderDojo岐阜

CoderDojo 岐阜

7歳から17歳の子供達へプログラミングに取り組める環境を無料で提供する活動です。メンターとして参加しています。

Adobe XD User Group NAGOYA

Adobe XD User Group名古屋

ワイヤーフレーム・UIデザイン・プロトタイピングの知識・経験などを、参加者全員で共有したり、最近の制作を取り巻くUXやそのツール・プロセスについて勉強することを目的にしています。運営スタッフとして参加しています。

制作のご相談はこちら