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

CSSの単位（ユニット）徹底解説｜絶対単位と相対単位の違いと使い分け

CSSの単位とは

CSSでは、width（幅）、margin（マージン）、padding（パディング）、font-size（フォントサイズ）、border-width（ボーダーの太さ）など、さまざまなプロパティに対して長さを指定します。

長さは「数値＋単位」の形式で表現され、px、em、remなどが代表的な単位です。なお、数値と単位の間に空白を入れることはできません（例：16px は有効ですが、16 px は無効です）。

CSSの長さの単位は、大きく以下の2種類に分類されます。

  • 絶対単位（absolute units）
  • 相対単位（relative units）

絶対単位（Absolute Units）

絶対単位は、画面サイズやデバイス、他の要素の影響を受けず、常に固定されたサイズとして扱われる単位です。印刷用のスタイルシートなど、正確な物理サイズが必要な場面で主に使用されます。

単位略称
ピクセル（Pixels）px
ポイント（Points）pt
インチ（Inches）in
センチメートル（Centimeters）cm
パイカ（Picas）pc

相対単位（Relative Units）

相対単位は、親要素のフォントサイズやビューポート（ブラウザの表示領域）のサイズなど、別の値を基準として長さが決まる単位です。画面サイズに応じて柔軟に拡縮できるため、レスポンシブデザインには欠かせません。

単位略称基準となる値
パーセント（Percent）%親要素の対応する値
Emem要素自身のフォントサイズ
Exex小文字「x」の高さ
Root Emremルート要素（html）のフォントサイズ
Viewport Widthvwビューポートの幅の1%
Viewport Heightvhビューポートの高さの1%
Viewport Minimumvminビューポートの短い辺の1%
Characterch数字「0」の幅
Gridgdグリッドのセルサイズ

使い分けのポイント

Web制作の実務では、フォントサイズや余白の指定には rem や em を使うことで、ユーザーのブラウザ設定に応じた柔軟な文字サイズ調整が可能になります。また、全画面レイアウトやヒーローセクションの高さ指定には vh、幅の指定には vw が便利です。一方、印刷物向けのCSSでは pt や cm といった絶対単位が適しています。

  1. CSSのtext-transformプロパティでテキストの大文字・小文字を変換する方法

    CSSのtext-transformプロパティを使うと、要素内のテキストの大文字・小文字の表示形式を簡単に制御できます。指定できる値は、capitalize、lowercase、uppercase、full-width、full-size-kana、noneの6種類です。 構文 CSSのtext-transformプロパティの構文は以下のとおりです。 Selector {    text-transform: /*value*/ } 指定できる値の一覧 capitalize … 各単語の先頭文字を大文字にします uppercase … すべての文字を大文字にします lo

  2. CSSでテーブルをスタイリングする方法｜主要プロパティと実例コード

    CSSによるテーブルのスタイリングとは HTMLのテーブルは、CSSを使うことで罫線・余白・背景などを自由にデザインできます。<table>要素とその子要素をスタイリングする際には、主に以下のプロパティが使用されます。 border罫線の太さ（border-width）、スタイル（border-style）、色（border-color）をまとめて定義できるプロパティです。 border-collapse隣り合うセルの罫線を1本に共有するか（collapse）、セルごとに独立させるか（separate）を指定します。 caption-side<caption>で付け