「remってよく聞くけど何だろう。pxじゃなんでだめなんだろう。カンタンにコピペで使えたりできたら嬉しいなぁ」こういった悩みを解決します。HTML/CSSを使ってコーディングをしている方なら、一度はremというワードを聞いたことがあるかと思います。Twitterなどの情報だと「remは使ったほうが良い」といった内容だったりで、具体的な解説はあまりないですよね。今回はそんな方のために、remについて解説していきます。本記事の内容は以下の通りです。\現在90部突破!無料特典あり🎁/ココナラで営業ゼロで稼ぎたい人はこちら【最新/2023年版】remをSassで指定する方法Sassでコーディングしている方は下記コピペで使えるようになっています。※将来的にSassでの除算(スラッシュを使用した計算)が非推奨となるため、@useで指定するremの書き方がベストかなと思います。1rem;}こちらもコピペで使用できるので、サクッと導入してみてください。僕は下記の画像のように指定しています。@use以外の場合※非推奨です上記の理由から、下記の書き方は非推奨となっていく流れです。1rem;}font-sizeのremを解説remとは?html要素(ルート)に指定されてる要素を相対的に見た時の基準を「1rem」として考えていきます。難しいかもですが、下記を見ていただければなんとなく分かるかと思います。html要素のフォントサイズが16pxの場合→1remhtml要素のフォントサイズが18pxの場合→1remhtml要素のフォントサイズが24pxの場合→1remhtml要素のフォントサイズが36pxの場合→1rem実際にはこういう風に使いませんが分かりやすく例えてみました。html要素に指定されてあるサイズの基準=1remになるわけです。html要素のサイズが16pxで、2remを指定した時は32pxになります。18pxで2remを指定した時は36pxになります。なんとなくremについてのイメージが出来たでしょうか。px指定はどうなのか?pxで指定した場合、Chroomブラウザの環境設定でフォントサイズを変更した時に影響を受けなくなってしまいます。ユーザビリティが悪くなるといった感じです。rem変換表一覧rem変換表は下記になります。0.8125rem13px0.875rem14px0.9375rem15px1rem16px1.0625rem17px1.125rem18px1.1875rem19px1.25rem20px1.3125rem21px1.375rem22px1.4375rem23px1.5rem24px1.5625rem25px1.625rem26px1.6875rem27px1.75rem28px1.8125rem29px1.875rem30px1.9375rem31px2rem32px2.0625rem33px2.125rem34px2.1875rem35px2.25rem36pxですが、このままだと使い勝手が悪いですよね。いちいち計算をしなくてはいけなかったりと不便です。ここからは具体的に効率よく使えるように記述する方法を紹介していきます。ややこしいかもしれませんが、イメージだけ掴んでくれればOKです。コピペで済むので問題ありません。Sassを使っている方は、冒頭に記述した方法で問題ありませんが、cssだけでコーディングしている方ならこちらの方が便利だと思います。実際にremを使っていく場合は、下記のように記述しておくことで便利に扱えるようになります。62.5%;}この記述は絶対ではありませんが、このように書いておくと便利です。基本的にブラウザのフォントサイズのデフォルトは16pxになります。font-size62.5%をhtml要素に指定することで、フォントサイズを10pxで計算することができます。することでremの指定が簡単になるといった感じです。html要素に62.5%を指定ブラウザのフォントサイズが10pxになる指定したいpxと同じ数字を指定するだけなので計算の必要が無いこのようになる訳ですね。36pxにしたい場合、3.6remを指定するだけです。36px;と同じ意味}なんとなく分かってきたでしょうか。複雑に見えるかもですが慣れてしまえば意外と簡単です。remをSassで指定する方法【2023年版】つづいて、Sassで指定する方法になります。Sassで使う場合は、@mixinで指定して@includeで呼び出す方法になります。こちらもやや難しく見えますが、一度Sassを使ったことがあればなんとなく分かるかと思います。いえこちらもイメージだけ理解できればいいと思います。※こちらも現時点では非推奨になるので注意です@mixinの指定は、普段からコピペで使い回しとなると思うので問題ないかと思います。24px;と同じ意味になります。48pxと同じ意味}まとめお疲れ様でした!一見、難しそうだと思いますが慣れてしまえば楽だと思います。上手に活用できればレスポンシブなどとも組み合わせてみるのもいいですね。Monkey】「このブロックでエラーが発生したためプレビューできません。Reserved.プライバシーポリシー|サイトマップ|特定商取引法に基づく。