CSSではHTMLで定義した文書を、見やすくレイアウトなどを整えデザインを起こしていきます。サイズや色、アニメーションなど単位や値を使って設定しますが、いろんな指定方法が存在し、いまいち違いがわからないケースもあったりしますよね。そこで今回はCSSのコーディングでの値と単位についてまとめてみたいと思います。  

1.絶対単位と相対単位

主にサイズを指定するときなどに用いる単位において、絶対単位と相対単位というものが存在します。絶対単位とは、表示される環境において変動しない一律の単位を指します。絶対単位にはpxやmmなどがあります。単位は一律ですが環境によって依存されることになります。そして相対単位とは、ある条件や状況下によって変動する単位のことを指します。相対単位にはemや％などがあります。相対単位を使うと状況に合わせて調整することが可能になります。  

2. サイズの指定について

ボックスの大きさやフォントサイズ、ボーダーの太さ、マージンの幅やウィンドウサイズなど、CSSではあらゆる部分でのサイズを設定します。  

px	絶対単位：デバイススクリーン上の最小単位である1つのドットの大きさ
％	相対単位：画面サイズや基準となる親要素に対しての割合
em	相対単位：基準となる要素のフォントサイズ（要素間でサイズの継承がされる）
rem	相対単位：ルート要素のフォントサイズ（要素間でサイズの継承がない）
ex	相対単位：基準となる要素の小文字「x」の高さ
mm	絶対単位：mmを基準としたサイズ（ピクセル換算で約3.78px）
in	絶対単位：inchを基準としたサイズ（ピクセル換算で約96px）
pt	絶対単位：印刷物などで用いられるポイントを基準としたサイズ（ピクセル換算で約1.33px）
vw	相対単位：ビューポートの幅を基準とした割合
vh	相対単位：ビューポートの高さを基準とした割合
vmin	相対単位：ビューポートの短い方を基準とした割合 （portraitの場合は幅、landscapeの場合は高さが基準となる）
vmax	相対単位：ビューポートの長い方を基準とした割合 （portraitの場合は高さ、landscapeの場合は幅が基準となる）

 

3. カラーの指定について

 

#rrggbb	RGBのカラー値を16進数で表記したもの （#000000 → 黒、#ffffff → 白、#ff0000 → 赤 など）
rgb	RGBのカラー値をそれぞれ0から255の数値で表したもの （0,0,0 → 黒、255,255,255 → 白、255,0,0 → 赤 など）
rgba	RGBの0から255で表したカラー値に透明度（alpha）の値を追加したもの （0,0,0,1.0 → 黒の完全不透明、0,0,0,0.5 → 黒の透明度50％、0,0,0,0.0 → 黒の完全透明＝透明 など）
hsl	色相（H）・彩度（S）・輝度（L）をそれぞれ指定したもの （180,70%,40% → 彩度70％・輝度40％のシアン など）
hsla	色相（H）・彩度（S）・輝度（L）に透明度（alpha）の値を追加したもの （180,70%,40%,0.5 → 彩度70％・輝度40％・透明度50％のシアン など）

 

4. その他の指定について

 

s	1秒間の時間を表す単位
ms	1000分の1秒間（ミリ秒）の時間を表す単位（1000ms＝1s）
deg	角度を表す単位で0から始まる数値で360（度）で一周する
dpi	解像度を表す単位で1インチあたりのドット数を示す（スクリーンや印刷物の解像度などに使用）

    このように、サイズや長さ、色や時間、角度などさまざまな数値を取り扱うことができます。それに伴って数多くの単位が登場しますので、ぜひ覚えて有効に活用していきたいですね。