CSSで使用される単位には、絶対値である「px」や、相対値の「em」「rem」「%」、そしてビューポートに基づく「vw」「vh」などがあります。さらに最近では、clamp()関数やコンテナクエリ、そして新しいビューポート単位も登場し、より柔軟でアクセシブルなWebデザインが可能になっています。
結論
- px（ピクセル） … 絶対値。固定サイズ指定に便利だが、ユーザの文字サイズ設定に影響されない。
- em（エム） … 親要素のfont-sizeを基準とした相対値。モジュール単位のスケーリングに有効。
- rem（レム） … html要素（root）のfont-sizeを基準とする相対値。全体の統一に便利。
- %（パーセント） … 親要素のサイズに対する割合。フォントやレイアウトの調整に活用できる。
- vw/vh … ビューポート幅・高さの割合。フルスクリーン対応などに便利。
- svw/svh/lvw/lvh/dvw/dvh … スマホのUI変化にも対応した新しいビューポート単位。
- vmin/vmax, vi/vb … ビューポートの比率や方向に応じた調整が可能。
基本的な単位の復習とポイント
px（ピクセル）
CSSで最も直感的な単位。1pxは固定サイズを表し、主に境界線やアイコンのサイズ指定に使われます。ただしユーザのブラウザ設定には影響を受けず、拡大・縮小されません。
em（エム）
emは親要素のfont-sizeを基準にサイズが決まるため、コンポーネント内の調整に向いています。ただし、親要素がさらにemを使っていると計算が複雑になります。
rem（レム）
html要素のfont-sizeを基準に計算されるため、予測しやすく、サイト全体のフォントサイズを管理するのに便利です。htmlのfont-sizeは相対値で指定するのが推奨されます。
%（パーセント）
親要素に対する割合。幅・高さだけでなく、font-sizeにも使用できます。階層が深くなっても累積しない点がemとの違いです。
vw/vh, vmin/vmax, vi/vb
ビューポートのサイズに基づいた単位。viはインライン軸（横書きの横幅）、vbはブロック軸（縦書きの縦幅）に対応します。
svw/svh/lvw/lvh/dvw/dvh
動的UIを考慮した新しいビューポート単位。スマホのアドレスバーなどによる表示領域の変動にも対応でき、レイアウト崩れを防げます。
最新のレスポンシブ設計とアクセシビリティ対応の実践的テクニック
1. clamp() を使った柔軟なサイズ指定
font-size: clamp(1rem, 2.5vw, 2rem);このように記述することで、最小・推奨・最大サイズを指定し、画面サイズに応じてスムーズにスケーリングが行われます。rem単位を併用することで、ユーザの設定にも柔軟に対応できます。
2. コンテナクエリ（Container Queries）の活用
親要素のサイズに応じて子要素のスタイルを変更できる仕組みです。以下のように使います：
.post {
container-type: inline-size;
}
@container (width > 700px) {
.card h2 {
font-size: 2em;
}
}クエリコンテナのサイズに合わせたスタイルの適用が可能で、再利用性と保守性の高い設計ができます。
3. 単位の組み合わせとアクセシビリティへの配慮
- em/remを中心に使用することで、ユーザのブラウザ設定に追従するデザインが可能になります。
- pxは特定要素のみに限定して使い、重要な情報の一貫性を保つ。
- htmlのfont-sizeは相対値（例: 100%）で指定することが推奨されます。
まとめ
CSSの単位は多様ですが、それぞれの特性を理解して使い分けることで、より柔軟でアクセシブルなWebデザインが実現できます。以下のポイントを意識すると、よりモダンな設計になります：
- clamp() でスケーラブルなスタイルを構築
- コンテナクエリで再利用性と柔軟性のあるコンポーネント設計
- ビューポート単位の正しい使い分け
- 相対単位と絶対単位の併用によるアクセシビリティの確保
これらを意識することで、快適かつ持続可能なWebサイトを構築できます。
.svg)
