right
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
試してみましょう
構文
/* <length> 値 */
right: 3px;
right: 2.4em;
/* 包含ブロックの幅に対する <percentage> */
right: 10%;
/* キーワード値 */
right: auto;
/* グローバル値 */
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;
値
<length>
-
負、null、または正の
<length>
で、以下のものを表します。- 絶対位置指定要素の場合は、包含ブロックの右辺までの距離。
- 相対位置指定要素の場合は、通常の位置からの左方向への移動量。
<percentage>
-
包含ブロックの幅に対する
<percentage>
です。 auto
-
以下のように指定します。
inherit
-
値が親要素(包含ブロックとは限りません)の計算値と同じであることを示すキーワードです。そして、この計算値は
<length>
,<percentage>
, またはauto
キーワードと同様に扱われます。
解説
right
の効果は、要素がどの様に配置されているか (つまり、 position
プロパティの値) によって変わります。
position
がabsolute
またはfixed
に設定されている場合、right
プロパティは要素の右辺の外部マージンと包含ブロックの右辺の内部境界との間の距離を指定します。position
がrelative
に設定されている場合、right
プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。position
がsticky
に設定されている場合、right
プロパティは要素がビューポート内にある場合はposition
がrelative
であるかのように、外の場合はposition
がfixed
の場合と同様に動作します。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 id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</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 id="parent">
Parent
<div id="noWidth">No width</div>
<div id="width">width: 100px</div>
</div>
CSS
div {
outline: 1px solid #cccccc;
}
#parent {
width: 200px;
height: 200px;
background-color: #ffc7e4;
position: relative;
}
/* declare both a left and a right */
#width,
#noWidth {
background-color: #c2ffd7;
position: absolute;
left: 0;
right: 0;
}
/* declare a width */
#width {
width: 100px;
top: 60px;
}
結果
仕様書
Specification |
---|
CSS Positioned Layout Module Level 3 # insets |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
inset
: 関連するすべてのプロパティであるtop
,bottom
,left
,right
の一括指定- 対応する論理的プロパティ:
inset-block-start
,inset-block-end
,inset-inline-start
,inset-inline-end
および一括指定のinset-block
とinset-inline
position