From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/right/index.html | 143 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 143 insertions(+) create mode 100644 files/ja/web/css/right/index.html (limited to 'files/ja/web/css/right/index.html') diff --git a/files/ja/web/css/right/index.html b/files/ja/web/css/right/index.html new file mode 100644 index 0000000000..3b18fbb610 --- /dev/null +++ b/files/ja/web/css/right/index.html @@ -0,0 +1,143 @@ +--- +title: right +slug: Web/CSS/right +tags: + - CSS + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference + - ウェブ +translation_of: Web/CSS/right +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/right.html")}}
+ + + +

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

+ + + +

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

+ +

構文

+ +
/* <length> 値 */
+right: 3px;
+right: 2.4em;
+
+/* 内包ブロックの幅に対する <percentage> */
+right: 10%;
+
+/* キーワード値 */
+right: auto;
+
+/* グローバル値 */
+right: inherit;
+right: initial;
+right: unset;
+
+ +

値

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

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
#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>
+
+ +

{{ EmbedLiveSample('Examples', 500, 220) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}right をアニメーション可能として定義
{{SpecName('CSS3 Positioning', '#propdef-right', 'right')}}{{Spec2('CSS3 Positioning')}}sticky の位置の動作を追加
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.right")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf