font-sizeに設定する単位の使い分け rem px % vw vh
font-sizeプロパティに指定する単位について、最適な選択はrem単位であると理解されています。以下はその理由です：
ルート要素のfont-sizeを基準とする:
rem単位は、ルート要素（通常はHTML要素）のfont-sizeを基準として相対的な値を指定します。これにより、全体的なレイアウトとデザインの比率を維持しつつ、文字サイズを変化させることができます。アクセシビリティの考慮:
rem単位は、アクセシビリティの観点からも優れています。ブラウザの文字サイズ調節機能を考慮する場合、rem単位を使用することで、文字サイズの変更に対応することができます。柔軟なレイアウト:
rem単位は、メディアクエリを使用してレスポンシブデザインを実現する際に非常に便利です。ルート要素のfont-sizeを動的に調整することで、各デバイスや画面サイズに対応することができます。
文字、文字周りの余白、文字とセットの要素（exカードの画像など）はremで作る。
使用例
・
remは特に大きな欠点はなく、柔軟性と安定性を持っています。
一方、他の単位については以下の特徴があります：
px単位:
絶対値の単位で、親要素や画面サイズに影響されません。固定値を指定する場合に適しています。
レスポンシブデザインが主流となっている現在、pxの使用は限定的になっています。しかし、以下の例のような、pxを使用することが適切なシチュエーションも存在します：
ロゴ： 特定の縦横のサイズで表示する必要があるアイコンやロゴは、メディアクエリと組み合わせて指定することが多いです。
ボーダーやセパレータ： 1pxや2pxの細い線などは、相対単位では表現が難しいことがあります。
小さいアイコンやシャドウのサイズ：上と同じ理由。細かい設定になるから。
%単位:
親要素のサイズを基準として相対的な値を指定します。全体的なレイアウトに使用する場合に適しています。
注意点として、ネストされた要素でのサイズ計算が複雑になる可能性がある。
主な使用シチュエーション：
レイアウトの大きさの比率: 親要素に対する子要素のサイズを相対的に指定する場合
例：コンテナ内でのメインコンテンツとサイドバーの幅の比率
要素の分割: 空間を等分割する場合
例：50%で2等分 33.33%で3等分 25%で4等分
使用例：
・ブログ記事内の画像
・カード型UIの中の画像
・グリッドレイアウト内の画像
vw/vh単位:
ブラウザの画面サイズを基準として相対的な値を指定します。
vwやvhは見出しや特殊なデザイン要素などの限定的な用途で使用するものであり、本文などの長文テキストでの使用は一般的ではありません。理由はビューウィンドウに基づいてサイズが調整されるため、過度に可変になりすぎる可能性があるためです。
font-sizeプロパティにvwやvhを使用することは可能ですが、一般的にはあまり推奨されません。その理由と、より適切な代替手段について説明します：
可読性の問題:vwやvhを直接font-sizeに使用すると、画面サイズの変化に応じてフォントサイズが極端に大きくなったり小さくなったりする可能性があります[1][5]。これは特にモバイル端末で問題になりやすく、テキストが読みづらくなる原因となります。
アクセシビリティの懸念:ユーザーがブラウザの設定でデフォルトのフォントサイズを変更している場合、vwやvhを使用するとその設定が無視されてしまう可能性があります。これはアクセシビリティの観点から望ましくありません[4]。
使用例：
・ヒーローエリア（画像や見出し）
・全画面背景画像
em単位:
親要素のfont-sizeを基準として相対的な値を指定します。font-sizeプロパティに使用する場合、親要素のfont-sizeに依存します。
注意点として、ネストされた要素でのサイズ計算が複雑になる可能性がある。
emの正確な定義：
emは相対的な長さの単位で、以下のように定義されます。
・基本的には、その要素の計算済みフォントサイズを基準とします。
・もし要素自体にフォントサイズが設定されていない場合、直近の親要素のフォントサイズを基準とします。
・この過程は、フォントサイズが明示的に設定された要素に到達するまで、または文書のルート要素（通常は<html>）に到達するまで続きます。
使用例：
・ボタン内のパディング
・リスト項目のマージン
・アイコンのサイズ
・ボタンやアイコンのサイズ調整: ボタンの中の文字サイズが変わっても、余白のバランスを変えずに、ボタンの大きさを変えられます。
・段落内の余白調整: 段落の文字サイズに合わせて、段落の上下の余白を自動調整したい時に使えます。
・リストの階層表示: 入れ子になったリストで、階層が深くなるほど文字を小さくしたい時に便利です。
この記事が気に入ったらサポートをしてみませんか？