From ce31153ae37ba4bb6559cea6bd1b0f99754f4311 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 7 Nov 2021 13:13:32 +0900 Subject: CSS Positioned Layout のプロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/06 時点の英語版に同期 --- files/ja/web/css/left/index.md | 261 +++++++++++++++++++---------------------- 1 file changed, 123 insertions(+), 138 deletions(-) (limited to 'files/ja/web/css/left') diff --git a/files/ja/web/css/left/index.md b/files/ja/web/css/left/index.md index d0a7275f65..280b35171a 100644 --- a/files/ja/web/css/left/index.md +++ b/files/ja/web/css/left/index.md @@ -3,38 +3,27 @@ title: left slug: Web/CSS/left tags: - CSS - - CSS Property - - CSS プロパティ - CSS 位置指定レイアウト - - Reference + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.left translation_of: Web/CSS/left --- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/left.html")}}
- - +{{CSSRef}} -

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

+**`left`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[位置指定要素](/ja/docs/Web/CSS/position)の水平位置の決定に関与します。位置指定されていない要素には効果はありません。 - +{{EmbedInteractiveExample("pages/css/left.html")}} -

left と {{cssxref("right")}} の両方が定義されていて、幅の制約がない場合、要素は両方を満たすように伸縮されます。要素が両方を満たすように伸縮できない場合、要素の位置は過剰指定になります。このような場合、包含ブロックが左書きの場合は left の値が優先され、包含ブロックが右書きの場合は right の値が優先されます。

+## 構文 -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 left: 3px;
 left: 2.4em;
 
-/* 内包ブロックの幅に対する <percentage> */
+/* 包含ブロックの幅に対する  */
 left: 10%;
 
 /* キーワード値 */
@@ -43,41 +32,110 @@ left: auto;
 /* グローバル値 */
 left: inherit;
 left: initial;
+left: revert;
 left: unset;
-
- -

値

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

形式文法

+``` + +### 値 + +- {{cssxref("<length>")}} + + - : 負、null、または正の {{cssxref("<length>")}} で、以下のものを表します。 + + - *絶対位置指定要素*の場合は、包含ブロックの左辺までの距離。 + - *相対位置指定要素*の場合は、通常の位置からの右方向への移動量。 + +- {{cssxref("<percentage>")}} + - : 包含ブロックの幅に対する {{cssxref("<percentage>")}} です。 +- `auto` + + - : 以下のように指定します。 + + - *絶対位置指定要素*では、要素の位置は {{Cssxref("right")}} プロパティに基づいて決まり、 `width: auto` は内容物の幅に基づいて決まります。また、 `right` も `auto` であった場合は、要素は水平方向には静的要素が配置される場合と同様に配置されます。 + - *相対位置指定要素*では、通常の位置から要素までの距離は {{Cssxref("right")}} に基づきます。また、 `right` も `auto` であった場合は、水平方向には移動しません。 + +- `inherit` + - : 値が親要素 (包含ブロックとは限りません) の計算値と同じであることを示すキーワードです。そして、この計算値は {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, または `auto` キーワードと同様に扱われます。 + +## 解説 + +`left` の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。 + +- `position` が `absolute` または `fixed` に設定されている場合、 `left` プロパティは要素の左辺と包含ブロックの左辺との間の距離を指定します。 (包含ブロックは相対配置された祖先の要素です。) +- `position` が `relative` に設定されている場合、 `left` プロパティは要素の左辺が通常位置から右方向へ移動する量を指定します。 +- `position` が `sticky` に設定されている場合、 `left` プロパティは sticky 制約の矩形を計算するために使用されます。 +- `position` が `static` に設定されている場合、 `left` プロパティは*効果がありません*。 + +`left` と {{cssxref("right")}} の両方が定義されていて、幅の制約がない場合、要素は両方を満たすように伸縮されます。要素が両方を満たすように伸縮できない場合、要素の位置は*過剰指定*になります。このような場合、包含ブロックが左書きの場合は `left` の値が優先され、包含ブロックが右書きの場合は `right` の値が優先されます。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -

例

+## 例 + +

位置指定要素

+ +#### HTML + +```html +
+
+ 
+      position: absolute;
+      left: 20px;
+      top: 20px;
+
+

The only containing element for this div is the main window, so it positions itself in relation to it.

+
-

CSS

+
+ 
+      position: relative;
+      top: 0;
+      right: 0;
+
+

Relative position in relation to its siblings.

+
-
#wrap {
+  

+    
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    

+    
Relative to its sibling div above, but removed from flow of content.

+
+    

+      
+        position: absolute;
+        bottom: 10px;
+        right: 20px;
+      

+      
Absolute position inside of a parent with relative position

+    

+
+    

+      
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 200px;
+      

+      
Absolute position with both left and right declared
 

+  

+
+``` + +#### CSS + +```css +#wrap { width: 700px; margin: 0 auto; background: #5C5C5C; @@ -131,96 +189,23 @@ pre { left: 0; top: 100px; background-color: #D7FFC2; -} +} +``` -

HTML

+#### 結果 -
<div id="wrap">
-  <div id="example_1">
-    <pre>
-      position: absolute;
-      left: 20px;
-      top: 20px;
-    </pre>
-    <p>The only containing element for this div is the main window, so it positions itself in relation to it.</p>
-  </div>
+{{EmbedLiveSample('Positioning_elements',1200,650)}}
 
-  <div id="example_2">
-    <pre>
-      position: relative;
-      top: 0;
-      right: 0;
-    </pre>
-    <p>Relative position in relation to its siblings.</p>
-  </div>
+## 仕様書
 
-  <div id="example_3">
-    <pre>
-      float: right;
-      position: relative;
-      top: 20px;
-      left: 20px;
-    </pre>
-    <p>Relative to its sibling div above, but removed from flow of content.</p>
+{{Specifications}}
 
-    <div id="example_4">
-      <pre>
-        position: absolute;
-        bottom: 10px;
-        right: 20px;
-      </pre>
-      <p>Absolute position inside of a parent with relative position</p>
-    </div>
+## ブラウザーの互換性
 
-    <div id="example_5">
-      <pre>
-        position: absolute;
-        right: 0;
-        left: 0;
-        top: 200px;
-      </pre>
-      <p>Absolute position with both left and right declared</p> </div>
-  </div>
-</div>
- -

実行例

- -

{{EmbedLiveSample('Examples',1200,650)}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Positioning', '#propdef-left', 'left')}}{{Spec2('CSS3 Positioning')}}sticky の位置の動作を追加
{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}{{Spec2('CSS2.1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +{{Compat}} + +## 関連情報 + +- {{cssxref("inset")}}: 関連するすべてのプロパティである {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("right")}} の一括指定 +- 対応する論理的プロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} および一括指定の {{cssxref("inset-block")}} と {{cssxref("inset-inline")}} +- {{cssxref("position")}} -- cgit v1.2.3-54-g00ecf