Discussion
font-sizeにremを使用して
他のプロパティ(*1)にはemを使用すると、
フォントサイズの変更によってサイズの拡大・縮小が容易なため私はこれを使っています。
特にボタンなど、DOMツリーの末端にあるものはこれが有効だと考えています。
しかしデザイナーさんが数値を決めている場合はそれに忠実に作るためにサイジングにremを使うことが多いのかもしれません。
リアルな現場ではどういった選択がされているのでしょうか？
経験のある方、ご教授いただけますでしょうか。
*1 他のプロパティ: width, height, padding, margin, border-radius など
こちらのサイト
https://web-camp.io/magazine/archives/102270
にあるように、
htmlに指定したfont-sizeを基準にした大きさがrem、
書かれている場所の親要素のfont-sizeを基準にした大きさがemみたいです。
具体的には以下のようになります。
<html>
<head>
省略
</head>
<body>
（デフォルトのfont-sizeの値は16pxなので、）
ここは1rem=16px, 1em=16px です。
<div style='font-size: 20px;'>
ここは1rem=16px, 1em=20px です。
</div>
ここは1rem=16px, 1em=16px です。
</body>
</html>
@YoshihisaTanaka-prog
ご回答ありがとうございます。
ええ、remとemの意味はわかっているのですが、保守性の高いCSSを書くためには2者をどう使い分けたらいいのか、そこを迷っています。
基本的にはremを使うほうがよいと考えています。私はremを使用しています。
なぜならばemを使用すると、以下のサイトにあるように入れ子になったときに複雑になるからです。
https://www.conifer.jp/csstest/css-fontsize-em-rem.html
またこのサイトには記述されていませんが、上階層の文字サイズのem値だけを変更したい場合に、下階層の文字サイズのemの数値を変更する必要があるからです。
変更前
<body>
<div style='font-size: 2em;'>
<p>これは2remのサイズと同じです。</p>
<div style='font-size: 0.5em;'>
<p>これは1remのサイズと同じです。（2em * 0.5em = 1rem)</p>
</div>
</div>
変更後
<body>
<div style='font-size: 3em;'>
<p>これは3remのサイズと同じです。（親のdivのfont-sizeを変更したためです）</p>
<div style='font-size: 0.5em;'>
<p>これは1.5remのサイズと同じです。（ここのfont-sizeは0.5emのままですが、1remではなく1.5remのサイズになっています。3em * 0.5em = 1.5rem）</p>
</div>
</div>
※この例ではdivに対してfont-sizeを指定していることでわざと問題を引き起こしています。pやh1のclassにemを使用するスタイルを適用すればよいのですが。
em/remの話とは変わってしまいますが、保守性を高めるのであればSCSSで変数を使用する*1か、cssで変数を使用する*2ほうがよいかもしれません。
*1 SCSS で変数を使用する | まくまくSassノート
https://maku77.github.io/sass/var.html
*2 CSS の新機能：CSS 変数（Custom Properties）
https://www.webdesignleaves.com/pr/css/css_basic_12.html
@autoaim-jp
ご回答ありがとうございます。
確かにfont-sizeにemを使ったら入れ子の時問題になるので私も使わないようにしています。
しかし問題は他のプロパティにemを使うかremを使うかということになります。
他のプロパティにemを使う場合、font-sizeを1.2倍した時width, height,padding, marginなども同時に1.2倍されるので部品の形状を変えずに大きさだけを変えることができます。その代わりwidthなどの値が数値で表現しづらくなります。
一方でremを使うとピクセルコーディングなどにおいては容易に記述することができる一方で、「もう少し大きく」といった要望があった場合全てのプロパティを変更しなければならないので素早く対応できません。
まあ色々考えましたがほとんどの場合デザイナーさんが決めたデザインを忠実に再現するためにremを使った方が良さそうですね。