【CSS Modules】length型の使い方

lengthオブジェクトは、CSSにおいて要素の長さや距離を表すための概念的な実体です。このlengthは、数値と単位を組み合わせて表現されるデータ型であり、ウェブページのレイアウトや要素のサイズ、位置などを指定する際に不可欠な要素となります。具体的な形式としては、「100px」や「2em」、「50%」のように記述されます。

lengthで使用される単位には、大きく分けて絶対単位と相対単位の二種類が存在します。絶対単位には、画面上の物理的なピクセル数を指定する「px」や、印刷物で用いられる「pt」などがあり、これらの値は常に固定されます。一方、相対単位には、親要素のフォントサイズを基準とする「em」、ルート要素のフォントサイズを基準とする「rem」、ビューポート（表示領域）のサイズを基準とする「vw」「vh」などがあり、これらの値は状況に応じて変化します。また、親要素に対する割合を示す「%」も相対的な長さとして広く利用されます。

width、height、margin、padding、font-sizeといった多岐にわたるCSSプロパティの値として、lengthは頻繁に用いられます。特に数値が「0」の場合、単位を省略して単に「0」と記述できるという特徴があります。システムエンジニアを目指す初心者の方にとって、lengthの概念とその多様な単位、特に相対単位の適切な使い分けを理解することは、ウェブデザインの基礎を固め、柔軟でレスポンシブなレイアウトを実装するための重要なステップとなります。

Copy
1width: 100px;

引数なし

引数はありません

戻り値なし

戻り値はありません