相対単位：emとrem
emとremの単位を使って、親要素またはルートのフォントサイズを基準に要素のサイズを設定します。
「相対単位：emとrem」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
相対単位とは
相対単位は、別の測定値（通常は要素またはルートのフォントサイズ）を基準に拡大・縮小します。ユーザー設定を尊重する、拡張性とレスポンシブ性に優れたデザインを実現できます。
em — 親のフォントサイズを基準とする単位
emは、現在の要素のfont-size（font-size自体に使う場合）または親要素（その他のプロパティに使う場合）を基準とします。これにより、値が累積することがあります。
<div class="parent">
Parent (20px)
<div class="child">
Child (1.5em = 30px)
<div class="grandchild">Grandchild (1.5em = 45px!)</div>
</div>
</div>
間隔に使うem
padding、margin、border-radiusにemを使うと、要素自身のfont-sizeを基準とします。これにより、コンポーネントを比例的に拡大・縮小できます。
<button class="button">Padded Button</button>
rem — ルートのフォントサイズを基準とする単位
rem（root em）は、ルート要素のfont-size（html）を基準とします。値が累積することはなく、ページ全体で予測しやすい単位です。
<h1>Heading (2.5rem = 40px)</h1>
<p>Paragraph text (1rem = 16px)</p>
<small>Small print (0.75rem = 12px)</small>
remとユーザーのアクセシビリティ
ユーザーが読みやすさのためにブラウザーの基本フォントサイズを（たとえば16pxから20pxに）大きくすると、rem単位もそれに応じて拡大します。固定値のpx単位は拡大しません。そのため、タイポグラフィにはremが強く推奨されます。
パーセントで指定するhtmlのfont-size
ユーザーのブラウザー設定を尊重するには、ルートのfont-sizeをパーセントで設定します。
<p>Root font-size respects the browser/user default (100%).</p>
emとremの選び方
実用上の指針：
- フォントサイズ、スペーシングトークン、レイアウトの寸法には
remを使用します - コンポーネントのフォントサイズに合わせて拡大・縮小する、コンポーネント内部の間隔（ボタンのpaddingなど）には
emを使用します
メディアクエリでのem
emで指定したメディアクエリは、ブラウザーのフォントサイズの変更に応じて変化します。48emのブレークポイントはデフォルト設定では768pxですが、ユーザーが基本フォントサイズを変更している場合はそれに合わせて変化します。
<div class="layout">
<div>Column A</div>
<div>Column B</div>
</div>
emの計算
計算式は目的のpx / 親のpx = em値です。親が16pxで、24pxのテキストにしたい場合は、24/16 = 1.5emとなります。
<h2>Heading (24px via 1.5rem)</h2>
<p>Paragraph (18px via 1.125rem)</p>
emの累積問題
emサイズの要素を入れ子にすると、font-sizeが乗算によって累積します。これがfont-sizeにremが推奨される理由です。remは常にルートを基準とするため、値の累積を防げます。
ch — 文字幅
ch単位は、現在のフォントにおける文字「0」の幅に相当します。テキストコンテナの1行の長さを読みやすい範囲に制限するのに便利です。
<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>
クイックチェック
ボタンにfont-size: 1.25remとpadding: 0.5emが指定されています。ルートのfont-sizeが16pxの場合、paddingは何ピクセルですか。
まとめ
emは現在の要素のfont-size（font-size自体では親のfont-size）を基準に拡大・縮小するため、値が累積することがあります。remは常にルートを基準とし、値が累積することはありません。タイポグラフィと全体のスペーシングにはremを、コンポーネント内部の比例的な間隔にはemを使用します。
よくある質問
「相対単位：emとrem」レッスンは無料ですか？
はい。「相対単位：emとrem」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「相対単位：emとrem」で何を学びますか？
emとremの単位を使って、親要素またはルートのフォントサイズを基準に要素のサイズを設定します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「相対単位：emとrem」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。