かんろぐ Written by kan

【2022年/コピペOK】今さら聞けないfont-sizeのremについて解説【Sass対応】

CODE HTML/CSS

人気記事【無料サポート付】サーバー開設からWordPressの始め方をサポート


remについて知りたい人

「remってよく聞くけど何だろう。pxじゃなんでだめなんだろう。カンタンにコピペで使えたりできたら嬉しいなぁ」

こういった悩みを解決します。

HTML/CSSを使ってコーディングをしている方なら、一度はremというワードを聞いたことがあるかと思います。ですが、Twitterなどの情報だと「remは使ったほうが良い」といった内容だったりで、具体的な解説はあまりないですよね。

今回はそんな方のために、remについて解説していきます。

本記事の内容は以下の通りです。

  • 【最新版/2022年】remをSassで指定する方法
  • remについて
  • cssを使った指定方法
  • Sassを使った指定方法

こういった流れで解説します。それでは早速いきましょう!

【最新/2022年版】remをSassで指定する方法

Sassでコーディングしている方は下記コピペで使えるようになっています。

※将来的にSassでの除算(スラッシュを使用した計算)が非推奨となるため、@useで指定するremの書き方がベストかなと思います。

@useの場合※推奨です


@use "sass:math";
@function rem($remFz) {
    @return math.div($remFz, 16) * 1rem;
}

こちらもコピペで使用できるので、サクッと導入してみてください。僕は下記の画像のように指定しています。
remをsassで書く方法

@use以外の場合※非推奨です

上記の理由から、下記の書き方は非推奨となっていく流れです。ですが、一応載せておきます。


$remFontSize: 16;
@function rem($pixels) {
    @return $pixels / $remFontSize * 1rem;
}

font-sizeのremを解説

remとは?

html要素(ルート)に指定されてる要素を相対的に見た時の基準を「1rem」として考えていきます。ちょっと難しいかもですが、下記を見ていただければなんとなく分かるかと思います。

  • html要素のフォントサイズが16pxの場合→1rem
  • html要素のフォントサイズが18pxの場合→1rem
  • html要素のフォントサイズが24pxの場合→1rem
  • html要素のフォントサイズが36pxの場合→1rem

実際にはこういう風に使いませんが分かりやすく例えてみました。つまりhtml要素に指定されてあるサイズの基準=1remになるわけです。

なのでhtml要素のサイズが16pxで、2remを指定した時は32pxになります。
18pxで2remを指定した時は36pxになります。

なんとなくremについてのイメージが出来たでしょうか。

px指定はどうなのか?

pxで指定した場合、Chroomブラウザの環境設定でフォントサイズを変更した時に影響を受けなくなってしまいます。つまり、ユーザビリティが悪くなるといった感じです。

rem変換表一覧

rem変換表は下記になります。


0.8125rem	13px
0.875rem	14px
0.9375rem	15px
1rem	16px
1.0625rem	17px
1.125rem	18px
1.1875rem	19px
1.25rem	20px
1.3125rem	21px
1.375rem	22px
1.4375rem	23px
1.5rem	24px
1.5625rem	25px
1.625rem	26px
1.6875rem	27px
1.75rem	28px
1.8125rem	29px
1.875rem	30px
1.9375rem	31px
2rem	32px
2.0625rem	33px
2.125rem	34px
2.1875rem	35px
2.25rem	36px

ですが、このままだと使い勝手が悪いですよね。いちいち計算をしなくてはいけなかったりと不便です。

ここからは具体的に効率よく使えるように記述する方法を紹介していきます。
ちょっとだけややこしいかもしれませんが、イメージだけ掴んでくれればOKです。コピペで済むので問題ありません。

Sassを使っている方は、冒頭に記述した方法で問題ありませんが、cssだけでコーディングしている方ならこちらの方が便利だと思います。

実際にremを使っていく場合は、下記のように記述しておくことで便利に扱えるようになります。

CSSに記述

html {
  font-size: 62.5%;
}

この記述は絶対ではありませんが、このように書いておくと便利です。

基本的にブラウザのフォントサイズのデフォルトは16pxになります。そしてfont-size62.5%をhtml要素に指定することで、フォントサイズを10pxで計算することができます。そうすることでremの指定が簡単になるといった感じです。

  1. html要素に62.5%を指定
  2. ブラウザのフォントサイズが10pxになる
  3. 指定したいpxと同じ数字を指定するだけなので計算の必要が無い

このようになる訳ですね。

つまり36pxにしたい場合、3.6remを指定するだけです。「10px = 1rem」なので、

  • 24pxにしたい→2.4rem
  • 18pxにしたい→1.8rem
  • 32pxにしたい→3.2rem
  • 48pxにしたい→4.8rem

コードで見た場合


p{
font-size: 2.4rem; //font-size: 24px;と同じ意味
}
p{
font-size: 1.8rem; //font-size: 18px;と同じ意味
}
p{
font-size: 3.6rem; //font-size: 36px;と同じ意味
}

なんとなく分かってきたでしょうか。
一見、複雑に見えるかもですが慣れてしまえば意外と簡単です。

remをSassで指定する方法【2021年版】

つづいて、Sassで指定する方法になります。
Sassで使う場合は、@mixinで指定して@includeで呼び出す方法になります。

こちらもやや難しく見えますが、一度Sassを使ったことがあればなんとなく分かるかと思います。とはいえこちらもイメージだけ理解できればいいと思います。
※こちらも現時点では非推奨になるので注意です
@mixinの指定は、普段からコピペで使い回しとなると思うので問題ないかと思います。

style.scssに記述

@mixin fz($size: 16) { //呼び出すためにfz(何でもOK)と指定、fz=font-size
  font-size: ($size / 10) + rem;
}
html {
  font-size: 62.5%;
}

p {
  @include fz(24);
}

このような場合であれば、font-size: 2.4rem;となってfont-size: 24px;と同じ意味になります。

p {
  @include fz(18);//font-size: 1.8remとなり、font-size: 18pxと同じ意味
}
p {
  @include fz(36);//font-size: 3.6remとなり、font-size: 36pxと同じ意味
}
p {
  @include fz(48);//font-size: 4.8remとなり、font-size: 48pxと同じ意味
}

まとめ

お疲れ様でした!
一見、難しそうだと思いますが慣れてしまえば楽だと思います。上手に活用できればレスポンシブなどとも組み合わせてみるのもいいですね。»コピペで使えるブレイクポイントをまとめてみた【Sassもできる】

これを機にfont-sizeをpxからremに変更してみてはいかがでしょうか\(^^)/
この記事が良かったと思ったら感想ツイートもお待ちしています(`・ω・)ゞ(»かん@minimal_kan)

この記事がイイなと思ったらシェアお願いします\(^^)/

合わせて読みたい記事