【CSS Modules】rightプロパティの使い方
rightプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
rightプロパティは、要素の右端の位置を制御するプロパティです。このプロパティは、要素を親要素や配置コンテキストの右端からどのくらい離して配置するかを指定します。
rightプロパティが効果を発揮するには、対象要素のpositionプロパティがstatic（初期値）以外の値、具体的にはrelative（相対配置）、absolute（絶対配置）、fixed（固定配置）、sticky（スクロールに応じた固定配置）のいずれかに設定されている必要があります。staticの状態では、rightプロパティは要素の位置に影響しません。
指定できる値には、pxやem、remなどの単位を持つ具体的な長さ、親要素の幅に対する割合を示すパーセンテージ、そしてブラウザに自動計算を任せるautoがあります。autoを設定すると、要素の自然な位置や他の配置プロパティとの関係で右端の位置が決定されます。特にleftやwidthプロパティと併用された場合、それらの値とバランスを取りながら右端の位置が自動調整されることがあります。
このプロパティは、特に絶対配置や固定配置の要素を画面の右端に揃えたり、特定の距離を保持して配置したりする際に不可欠です。top、bottom、leftといった関連プロパティと組み合わせることで、要素の正確な位置決めを実現し、柔軟なウェブレイアウトの構築に役立ちます。
公式リファレンス: right
構文(syntax)
1right: <length-percentage> | auto;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません