right

right は CSS のプロパティで、位置指定要素の水平位置の決定に関与します。位置指定されていない要素には効果はありません。

試してみましょう

構文

css

/* <length> 値 */
right: 3px;
right: 2.4em;

/* 包含ブロックの幅に対する <percentage> */
right: 10%;

/* キーワード値 */
right: auto;

/* グローバル値 */
right: inherit;
right: initial;
right: revert;
right: unset;

値

<length>

負、null、または正の <length> で、以下のものを表します。

  • 絶対位置指定要素の場合は、包含ブロックの右辺までの距離。
  • 相対位置指定要素の場合は、通常の位置からの左方向への移動量。
<percentage>

包含ブロックの幅に対する <percentage> です。

auto

以下のように指定します。

  • 絶対位置指定要素では、要素の位置は left プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 left も auto であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
  • 相対位置指定要素では、通常の位置から要素までの距離は left に基づきます。また、 left も 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 の値が優先されます。

公式定義

初期値auto
適用対象位置指定要素
継承なし
パーセント値包含ブロックの幅に対する相対値
計算値長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では auto
アニメーションの種類length または パーセント値, calc();

形式定義

right = 
  auto                 |
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

例

絶対位置指定および相対位置指定で right を使用

HTML

html

<div id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</div>

CSS

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

html

<div id="parent">
  Parent
  <div id="noWidth">No width</div>
  <div id="width">width: 100px</div>
</div>

CSS

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

関連情報