CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの相対単位とは？主な単位の一覧とそれぞれの特徴を解説

CSSでは、要素の幅・高さ・フォントサイズなどを指定するために、さまざまな長さの単位が用意されています。中でも相対単位は、親要素のフォントサイズやビューポート（ブラウザの表示領域）など、他の値を基準として長さが決まる単位です。

絶対単位（pxやptなど）が環境に関係なく固定サイズになるのに対し、相対単位は画面サイズやフォント設定に応じて柔軟に変化します。そのため、レスポンシブデザインやアクセシビリティを意識したWeb制作において、相対単位は非常に重要な役割を果たします。

主な相対単位の一覧

CSSで利用できる代表的な相対単位とその略称は以下の通りです。

単位名略称
パーセント（Percent）%
エム（Em）em
エックスハイト（Ex）ex
ルートエム（Root em）rem
ビューポートの幅（Viewport width）vw
ビューポートの高さ（Viewport height）vh
ビューポートの最小値（Viewport minimum）vmin
文字幅（Character）ch
グリッド（Grid）gd

各相対単位の基準と特徴

%（パーセント）

親要素のサイズを基準とした割合で長さを指定します。例えば width: 50% と指定すると、親要素の幅の半分になります。レイアウトの柔軟な調整によく使われる基本的な単位です。

em

親要素（または自身）のフォントサイズを基準とする単位です。1em は基準となるフォントサイズと同じ大きさを表し、ネストが深くなると計算が複雑になる点に注意が必要です。

ex

現在のフォントにおける小文字「x」の高さ（x-height）を基準とする単位です。フォントによって実際の高さが異なるため、使用頻度は比較的低めです。

rem

ルート要素（<html>）のフォントサイズを基準とする単位です。emと違い入れ子の影響を受けないため、近年はフォントサイズ指定の標準的な選択肢として広く使われています。

vw / vh

ビューポート（ブラウザの表示領域）の幅・高さを基準とする単位です。1vw は表示領域の幅の1%、1vh は高さの1%に相当します。フルスクリーンのヒーローセクションなど、画面いっぱいのレイアウトに便利です。

vmin

ビューポートの幅と高さのうち、小さい方の1%を基準とする単位です。デバイスの向きが変わってもバランスの良いサイズ指定が可能になります。

ch

フォント内の数字「0」の幅を基準とする単位です。等幅フォントと組み合わせることで、入力欄の幅などを文字数ベースで直感的に指定できます。

gd

グリッドを基準とする単位ですが、対応しているブラウザが限られており、実務で使われることはほとんどありません。

まとめ

相対単位を使いこなすことで、画面サイズやユーザーのフォント設定に合わせて柔軟に変化する、レスポンシブでアクセシブルなWebサイトを構築できます。特に rem や vw / vh は現代のWeb開発で頻繁に活躍する単位なので、それぞれの基準と特性をしっかり理解しておきましょう。

  1. CSSの相対配置（position:relative）の仕組みと使い方を解説

    CSSでは、要素のpositionプロパティにrelative（相対配置）を指定することで、要素を通常どおりにレンダリングしながら位置を調整できます。相対配置が指定された要素は、CSSの配置プロパティ（top、right、bottom、left）によって、本来の位置から相対的に移動されます。 相対配置の大きな特徴は、要素が元々占めていた領域が保持されるという点です。そのため、要素をずらしても、周囲の他の要素のレイアウトには影響を与えません。 相対配置の基本例 それでは、CSSの相対配置の基本的な例を見てみましょう。 <!DOCTYPE html> <html> <

  2. 【初心者向け】CSSの絶対単位と相対単位の違いと使い分けを徹底解説

    CSSの絶対単位と相対単位は、どちらも「距離」を表す単位に分類されます。両者の大きな違いは、長さの基準となる対象にあります。 CSSの相対単位とは 相対単位は、親要素やビューポートなど他の要素を基準として要素の長さを定義します。例えば、相対単位 vh はビューポート（ブラウザの表示領域）の高さを基準とする単位です。 主なCSS相対単位は以下のとおりです。 番号単位と基準 1%親要素の寸法 2emその要素のフォントサイズ 3exその要素のフォントにおける x-height（小文字「x」の高さ） 4lhその要素の行の高さ（line-height） 5remルート要素（html要素）のフォン