【2023年/コピペOK】remとは？今さら聞けないfont-sizeについて解説【Sass対応】
PR ※当サイトではアフィリエイト広告を利用しています
remについて知りたい人
「remってよく聞くけど何だろう。pxじゃなんでだめなんだろう。カンタンにコピペで使えたりできたら嬉しいなぁ」
こういった悩みを解決します。
HTML/CSSを使ってコーディングをしている方なら、一度はremというワードを聞いたことがあるかと思います。ですが、Twitterなどの情報だと「remは使ったほうが良い」といった内容だったりで、具体的な解説はあまりないですよね。
今回はそんな方のために、remについて解説していきます。
本記事の内容は以下の通りです。
【最新/2023年版】remをSassで指定する方法
Sassでコーディングしている方は下記コピペで使えるようになっています。
※将来的にSassでの除算(スラッシュを使用した計算)が非推奨となるため、@useで指定するremの書き方がベストかなと思います。
@useの場合※推奨です
@use "sass:math";
@function rem($remFz) {
@return math.div($remFz, 16) * 1rem;
}
こちらもコピペで使用できるので、サクッと導入してみてください。僕は下記の画像のように指定しています。
@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の指定が簡単になるといった感じです。
- html要素に62.5%を指定
- ブラウザのフォントサイズが10pxになる
- 指定したい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で指定する方法【2023年版】
つづいて、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)
合わせて読みたい記事
