【WEB DESIGN】WEBデザインでよく使う長さの単位について

タグ :

長さの単位について

絶対長は、どのような状況でも変わることのない固定された長さを指します。相対長は、他の要素の大きさに応じてその長さが変動するもので、周囲の環境に応じて自分の大きさを調整する性質を持っています。

画面上の各ピクセルを単位とします。デジタルディスプレイの解像度に依存するため、特定の画面上で正確なサイズを指定できます。

物理的なインチ（2.54センチメートル）を基準とします。印刷物とWebデザインの両方で使用されることがあります。

物理的なセンチメートルを基準とします。主に印刷用に使用されます。

物理的なミリメートルを基準とします。これも主に印刷用に使用されます。

タイポグラフィで使用される単位で、1ポイントは1/72インチです。フォントサイズの指定によく使用されます。

タイポグラフィの単位で、1パイカは12ポイント（1/6インチ）です。主に印刷物のレイアウトに使用されます。

現在のフォントサイズに基づく相対単位です。たとえば、親要素のフォントサイズが16pxであれば、1emは16pxです。文字サイズの指定やマージン、パディングなどに頻繁に使用されます。

ルートエムはルート要素（通常はhtml要素）のフォントサイズに基づく相対単位です。これはemの一貫性の問題を解決するために使われ、全体のスケーリングに役立ちます。たとえば、html要素のフォントサイズが16pxであれば、1remは常に16pxです。

親要素の値に対する割合を示す単位です。幅や高さ、フォントサイズなどに使用され、柔軟なレイアウトを作成するために便利です。

ビューポートの幅の1%を基準にした単位です。たとえば、100vwはビューポートの幅全体に相当します。

ビューポートの高さの1%を基準にした単位です。たとえば、100vhはビューポートの高さ全体に相当します。

ビューポートの幅と高さのうち、最小の1%を基準にした単位です。幅と高さのどちらか小さい方に基づいてサイズが決まります。

ビューポートの幅と高さのうち、最大の1%を基準にした単位です。幅と高さのどちらか大きい方に基づいてサイズが決まります。