CSS 単位は、要素の寸法、距離、その他のプロパティを測定および指定するために使用されます。ここでは、いくつかの一般的な CSS ユニットとその使用方法の詳細な説明を示します。
-
ピクセル (Px) : ピクセルは最も一般的に使用される単位で、画面上の点を表します。ほとんどの場合、正確な制御と一貫した視覚効果が得られるため、単位としてピクセルを使用することが最も適切です。たとえば、
width: 200px;要素の幅を 200 ピクセルに設定します。 -
パーセンテージ (%) : パーセンテージの単位は、親要素のサイズを基準にして計算されます。たとえば、
width: 50%;要素の幅を親要素の幅の 50% に設定します。 -
em (em) : em 単位は、要素自体のフォント サイズに応じた計算に使用されます。たとえば、要素のフォント サイズが 16px の場合、
margin-top: 2em;上部には 32px に相当する余白が作成されます。 -
rem (root em) : rem 単位は em 単位と似ていますが、ルート要素 (つまり、<html> 要素) のフォント サイズを基準にして計算されます。これにより、rem 単位は親要素のフォント サイズではなくルート要素のフォント サイズの影響を受けるため、より便利になります。
-
vh と vw : vh (ビューポートの高さ) と vw (ビューポートの幅) は、ビューポート (ブラウザ ウィンドウ) の高さと幅に対する相対的な単位です。たとえば、
height: 50vh;要素の高さをビューポートの高さの 50% に設定します。 -
その他の単位: 上記の一般的な単位に加えて、アニメーション期間の秒 (s)、アニメーション遅延のミリ秒 (ms)、度などの角度単位など、特定の CSS プロパティに使用できる単位がいくつかあります ( deg)、ラジアン (rad)、変化率 (grad) などの勾配単位。
これらの単位を使用すると、数値を使用して計算を実行したり、数値を組み合わせたり、特定のニーズに合わせて調整したりできます。異なるユニットは異なるシナリオに適しており、特定の状況に応じて選択する必要があることに注意してください。また、レスポンシブ デザインの場合、相対単位 (パーセンテージ、em、rem、vh、vw など) を使用すると、さまざまな画面サイズに適切に適応できます。