【CSS Modules】leftプロパティの使い方

leftプロパティは、CSSのレイアウトにおいて、配置された要素の左端の位置を定義するプロパティです。このプロパティは、要素のpositionプロパティがstatic以外の値（例えばrelative、absolute、fixed、sticky）に設定されている場合にのみ効果を発揮します。

leftプロパティは、要素を親要素の左端からの相対的な距離、またはビューポート（ブラウザの表示領域）の左端からの距離で配置する際に使用されます。値としては、ピクセル（px）やem、remといった絶対的な長さの単位、またはパーセンテージ（%）を指定できます。パーセンテージで指定した場合、親要素の幅に対する割合で位置が決定されます。また、autoを指定することも可能で、この場合、ブラウザが自動的に位置を計算します。例えば、position: relativeの場合、要素は通常の流れに沿って配置され、position: absoluteやfixedでrightが指定されていない場合、要素の自然な幅に基づいて位置が決定されます。

このプロパティは、要素を正確な位置に配置したり、他の要素との間隔を調整したり、特定のUI要素を画面の左端に固定したりするのに非常に役立ちます。例えば、サイドバーやナビゲーションメニューの配置、ツールチップやモーダルウィンドウの表示位置の微調整など、さまざまな場面で利用されます。leftプロパティとrightプロパティが同時に指定された場合、widthプロパティがautoであれば、両方の値が満たされるように要素の幅が調整されます。これにより、要素を特定の位置に「引き伸ばす」ようなレイアウトも実現可能です。leftプロパティを理解することは、複雑なCSSレイアウトを構築する上で不可欠な要素となります。

Copy
1left: 20px;

引数なし

引数はありません

戻り値なし

戻り値はありません