font-sizeをremで指定する

コーディングでフォントサイズをpxではなくremで指定した方が、アクセシビリティの観点からいいとされていますが、その理由とsassでpx → remへ変換する自作関数について紹介します。

絶対値と相対値

私の足のサイズは25.5cmですが、これはどこにいても25.5cmで変わらず、絶対値と呼ばれます。
WEBの場合pxが絶対値になるので、font-size: 16px;と指定したらデバイスやブラウザ環境に左右されることなく16pxで表示されます。
ブラウザの設定で文字サイズを大きく設定したユーザーにとっても、設定が活かされずに同じ16pxで表示されてしまいます。

「90%」といわれたら、何かの基準に対しての90%→相対的な数値になります。
WEBでいうと %、em、rem が相対値になります。

1emも1remも両方とも「1文字分」になりますが、基準としているものが違います。
フォントサイズに指定する場合、1emは親のフォントサイズ1文字分、1remはhtmlのフォントサイズ1文字分になります。

特に指定がなけれはhtmlのフォントサイズは16pxなので、1rem=16pxとして計算します。
font-size: 1rem; と指定することで、指定がなかれば16px、ブラウザ設定で文字サイズを大きくしていれば20px・・・といったようにユーザーの設定を反映させた指定ができます。

計算が大変

たとえば14pxをremで指定しようとすると、14÷16=0.875rem、といったように計算が面倒になります。より直感的にrem指定ができるようにする方法を2つ紹介します。

font-size: 62.5%

1つ目は、htmlのフォントサイズを62.5%にするという手法です。
すると、1remは16×0.625=10pxになります。
14pxを指定する場合は1.4remになるので、わかりやすいですね。

sassの自作関数を使う

以前紹介した単位を除く関数と組み合わせて、cssにコンパイルした時にrem に変換されるスニペットを作っておく方法もあります。

数値の単位を除く関数strip-unitのコードはコチラです↓

//function.scss
@use 'sass: math';
@use 'sass: meta';
@function strip-unit($number){
  @if meta.type-of($number) == 'number' and not math.is-unitlless($number){
    @return math.div($number, $number * 0 + 1);
  }
  @return $number;
}

この関数を利用して、pxをrem変換する関数を自作します。

@use 'sass: math';

@function rem($pixel, $base: 16){
  @if math.unit($pixel) != 'px'{
    @warn '引数には、単位がpxの数値を入れて下さい'
  }
  @return math.div(stip-unit($pixel), 16) * 1rem;
}

引数$pixelに入れた数値がそのまま単位が外れて、16で割った数値にremがつきます。
使い方としては

//sass
.hoge{
  font-size: rem(42px);
}


//コンパイル後↓
.hoge{
  font-size: 2.625rem;
}

このような感じになります。