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/left/index.html | 228 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 files/ja/web/css/left/index.html (limited to 'files/ja/web/css/left') diff --git a/files/ja/web/css/left/index.html b/files/ja/web/css/left/index.html new file mode 100644 index 0000000000..a7d16d6eb3 --- /dev/null +++ b/files/ja/web/css/left/index.html @@ -0,0 +1,228 @@ +--- +title: left +slug: Web/CSS/left +tags: + - CSS + - CSS Property + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference +translation_of: Web/CSS/left +--- +
{{CSSRef}}
+ +

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

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

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

+ + + +

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

+ +

構文

+ +
/* <length> 値 */
+left: 3px;
+left: 2.4em;
+
+/* 内包ブロックの幅に対する <percentage> */
+left: 10%;
+
+/* キーワード値 */
+left: auto;
+
+/* グローバル値 */
+left: inherit;
+left: initial;
+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 キーワードと同様に扱われます。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

CSS

+ +
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width:200px;
+  height:200px;
+  position:absolute;
+  bottom:10px;
+  right:20px;
+  background-color:#FFC7E4;
+}
+#example_5 {
+  position: absolute;
+  right: 0;
+  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>
+
+  <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>
+
+    <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")}}

+ +

関連情報

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