CSSユニット

CSSでユニットを操作する方法を学ぶ

CSSで毎日使用するものの1つは単位。これらは、長さ、パディング、マージンの設定、要素の整列などに使用されます。

のようなものpxemrem、またはパーセンテージ。

彼らはいたるところにいます。比較的未知のものもあります。

ピクセル

最も広く使用されている測定単位。ピクセルは実際には画面上の物理ピクセルとは相関していません。これは、デバイスによって大きく異なるためです(高DPIデバイスと非Retinaデバイスを考えてみてください)。

このユニットをデバイス間で一貫して機能させるための規則があります。

パーセンテージ

もう1つの非常に便利な指標であるパーセンテージを使用すると、その親要素の対応するプロパティのパーセンテージで値を指定できます。

例:

.parent {
  width: 400px;
}

.child { width: 50%; /* = 200px */ }

実世界の測定単位

外界から翻訳された測定単位があります。画面上ではほとんど役に立たないため、スタイルシートの印刷に役立ちます。彼らです:

  • cmセンチメートル(37.8ピクセルにマップ)
  • mmミリメートル(0.1cm)
  • q4分の1ミリメートル
  • inインチ(96ピクセルにマップ)
  • ptポイント(1インチ= 72ポイント)
  • pcパイカ(1パイカ= 12ポイント)

相対単位

  • emその要素に割り当てられた値ですfont-sizeしたがって、その正確な値は要素間で異なります。使用するフォントによって変わることはなく、フォントサイズだけが変わります。タイポグラフィでは、これは幅を測定しますm文字。
  • remと類似していますem、ただし、現在の要素のフォントサイズを変更する代わりに、ルート要素を使用します(html) フォントサイズ。そのフォントサイズを一度設定すると、remすべてのページで一貫した測定値になります。
  • exのようなものですem、しかし幅を測定するために挿入されたm、それはの高さを測定しますx文字。使用するフォントやフォントサイズによって異なります。
  • chのようなものですexしかし、の高さを測定する代わりにxそれはの幅を測定します0(ゼロ)。

ビューポートユニット

  • vwインクルードビューポート幅の単位ビューポート幅のパーセンテージを表します。50vwビューポート幅の50%を意味します。
  • vhインクルードビューポートの高さの単位ビューポートの高さのパーセンテージを表します。50vhビューポートの高さの50%を意味します。
  • vminインクルードビューポートの最小単位高さまたは幅の間の最小値をパーセンテージで表します。30vminは現在の幅または高さの30%で、どちらが小さいかによって異なります
  • vmaxインクルードビューポートの最大単位高さまたは幅の間の最大値をパーセンテージで表します。30vmaxは現在の幅または高さの30%で、どちらが大きいかによって異なります

分数単位

fr分数の単位であり、CSSグリッドスペースを分数に分割します。

私の無料ダウンロードCSSハンドブック


その他のCSSチュートリアル: