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

right の効果は、要素がどの様に配置されているか (つまり、 position プロパティの値) によって変わります。

  • positionabsolute 又は fixed に設定されている場合、 right プロパティは要素の右辺と包含ブロックの右辺との間の距離を指定します。
  • positionrelative に設定されている場合、 right プロパティは要素の右辺が通常位置から左方向へ移動する量を指定します。
  • positionsticky に設定されている場合、 right プロパティは要素がビューポート内にある場合は positionrelative であるかのように、外の場合は positionfixed の場合と同様に動作します。
  • positionstatic に設定されている場合、 right プロパティは効果がありません

leftright の両方が定義された場合、要素の位置は過剰指定になります。内包ブロックが左書きの場合 (つまり、 right の計算値が -left に設定されていた場合)、 left の値が優先されます。内包ブロックが右書きの場合 (つまり、 left の計算値が -right に設定されていた場合)、 right の値が優先されます。

構文

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

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

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

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

<length>
負、null、または正の <length> で、以下のものを表します。
  • 絶対位置指定要素の場合は、包含ブロックの右辺までの距離。
  • 相対位置指定要素の場合は、通常の位置からの左方向への移動量。
<percentage>
包含ブロックの幅に対する <percentage> です。
auto
以下のように指定します。
  • 絶対位置指定要素では、要素の位置は left プロパティに基づいて決まり、 width: auto は内容物の幅に基づいて決まります。また、 leftauto であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。
  • 相対位置指定要素では、通常の位置から要素までの距離は left に基づきます。また、 leftauto であった場合は、水平方向には移動しません。
inherit
値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は <length>, <percentage>, 又は auto キーワードと同様に扱われます。

形式文法

<length> | <percentage> | auto

#example_3 {
  width: 100px;
  height: 100px;
  background-color: #FFC7E4;
  position: relative;
  top: 20px;
  left: 20px;
}

#example_4 {
  width: 100px;
  height: 100px;
  background-color: #FFD7C2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
<div id="example_3">Example 3</div>
<div id="example_4">Example 4</div>

仕様書

仕様書 状態 備考
CSS Transitions
right の定義
草案 right をアニメーション可能として定義
CSS Positioned Layout Module Level 3
right の定義
草案 sticky の位置の動作を追加
CSS Level 2 (Revision 1)
right の定義
勧告 初回定義

初期値auto
適用対象配置された要素
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値長さで指定されると相当する絶対的な長さ、パーセンテージとして指定されると指定値、それ以外では auto
アニメーションの種類length または percentage, calc();
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応11215.551
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり あり4 あり1 あり

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,