このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
right
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
right はCSS のプロパティで、位置指定要素の水平位置の決定に関与します。このインセットプロパティは、位置指定されていない要素には効果がありません。
試してみましょう
right: 0;right: 4em;right: 10%;right: 20px;<section> <div> <div>これは絶対位置指定されています。</div> <p> まるで地球の表面から水が引き始めたかのように、通りは泥だらけで、ホルボーン通りを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。 </p> </div></section>.example-container { border: 0.75em solid; padding: 0.75em; text-align: left; position: relative; width: 100%; min-height: 200px;}#example-element { background-color: #264653; border: 4px solid #ffb500; color: white; position: absolute; width: 140px; height: 60px;}構文
/* <length> 値 */right: 3px;right: 2.4em;right: anchor(--my-anchor 50%);right: anchor-size(--my-anchor height, 65px);/* 包含ブロックの幅に対する <percentage> */right: 10%;/* キーワード値 */right: auto;/* グローバル値 */right: inherit;right: initial;right: revert;right: revert-layer;right: unset;値
<length>負、null、または正の
<length>で、以下のものを表します。- 絶対位置指定要素の場合は、包含ブロックの右端までの距離を表します。
- アンカー位置指定要素の場合は、
anchor()関数は、関連付けられたアンカー要素の左端または右端の位置を基準とした相対的な<length>値に解決されます（詳細はインセットプロパティでanchor()関数値を使用を参照）。また、anchor-size()関数は、関連するアンカー要素の幅または高さに相対的な<length>値に解決します（アンカーサイズに基づく要素の位置の設定 を参照）。 - 相対位置指定要素の場合は、通常の位置からの左方向への移動量を表します。
<percentage>包含ブロックの幅に対する
<percentage>です。auto以下のように指定します。
解説
right の効果は、要素がどの様に配置されているか (つまり、position プロパティの値) によって変わります。
positionがabsoluteまたはfixedに設定されている場合、rightプロパティは要素の右辺の外側のマージンと、包含ブロックの右辺の内側のマージンとの間の距離を指定します。位置指定要素に関連付けられたアンカー要素があり、プロパティ値にanchor()関数が含まれいる場合、rightは位置指定要素の右端を指定された<anchor-side>の辺からの相対位置を基準とします。rightプロパティは、left、right、start、end、self-start、self-end、center、および<percentage>値と互換性があります。positionがrelativeに設定されている場合、rightプロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。positionがstickyに設定されている場合、rightプロパティは sticky 制約の矩形を計算するために使用されます。positionがstaticに設定されている場合、rightプロパティは効果がありません。
left とright の両方が定義された場合、他のプロパティで制約されていなければ、要素は両方を満たすように引き伸ばされます。もし要素が両方を満たすように伸びることができない場合 — 例えばwidth が宣言されている場合 — 要素の位置は過剰制約になります。このような場合、コンテナーが左書きの場合はleft の値が優先され、コンテナーが右書きの場合はright の値が優先されます。
公式定義
形式定義
right =
auto|
<length-percentage>|
<anchor()>|
<anchor-size()>
<length-percentage> =
<length>|
<percentage>
<anchor()> =
anchor(<anchor-name>?&&
<anchor-side> ,<length-percentage>?)
<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside|
outside|
top|
left|
right|
bottom|
start|
end|
self-start|
self-end|
<percentage>|
center
<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline
例
絶対位置指定および相対位置指定で right を使用
HTML
<div>相対位置指定</div><div>絶対位置指定</div>CSS
#relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px;}#absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px;}結果
left と right の同時指定
left とright の両方が宣言されている場合、他の制約条件がそれを妨げない限り、要素は両方を満たすように伸びます。要素が両方を満たすように伸びたり縮んだりしない場合、要素の位置が過剰指定のとなり、コンテナーの書字方向に基づいて優先順位が決まります。コンテナーの書字方向が左書きであれば、left が優先されます。コンテナーの書字方向が右書きの場合は、right が優先されます。
HTML
<div> 親 <div>width なし</div> <div>width: 100px</div></div>CSS
div { outline: 1px solid #cccccc;}#parent { width: 200px; height: 200px; background-color: #ffc7e4; position: relative;}/* left と right の両方を宣言 */#width,#noWidth { background-color: #c2ffd7; position: absolute; left: 0; right: 0;}/* width を宣言 */#width { width: 100px; top: 60px;}結果
仕様書
| Specification |
|---|
| CSS Positioned Layout Module Level 3 # insets |