かんろぐ Written by kan

【5分で読める】今さら聞けないfont-sizeのremについて解説【コピペOKです】

CODE HTML/CSS

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


remについて知りたい人

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

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

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

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

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

  • remについて
  • cssを使った指定方法
  • Sassを使った指定方法

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

【コピペOK】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で指定してしまうと、すべての箇所でpxの修正が必要だったりします。また、スマホの登場によってpxの指定はあまり推奨されなくなったという背景があります。

14pxと指定した場合、PCで見ると大丈夫だけどタブレットサイズやパソコンで見ると小さくなってしまうといった感じです。それぞれの端末のデフォルトであるフォントサイズで表示するために、「1rem」を使用するのが良いよねって意味です。

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

ここからは具体的に効率よく使えるように記述する方法を紹介していきます。

実際にremをcssで指定する方法

ここからがちょっとだけややこしいかもしれませんが、イメージだけ掴んでくれればOKです。コピペで済むので問題ありません。
実際に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で指定する方法

つづいて、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)

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

合わせて読みたい記事

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