From 1230f83b7b538b7ab6fcbe0e6a8381a54b96edff Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 7 Nov 2021 01:32:20 +0900 Subject: CSS Positioned Layout のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/bottom/index.html | 151 --------------- files/ja/web/css/bottom/index.md | 151 +++++++++++++++ files/ja/web/css/clear/index.html | 235 ------------------------ files/ja/web/css/clear/index.md | 235 ++++++++++++++++++++++++ files/ja/web/css/float/index.html | 227 ----------------------- files/ja/web/css/float/index.md | 227 +++++++++++++++++++++++ files/ja/web/css/left/index.html | 226 ----------------------- files/ja/web/css/left/index.md | 226 +++++++++++++++++++++++ files/ja/web/css/position/index.html | 345 ----------------------------------- files/ja/web/css/position/index.md | 345 +++++++++++++++++++++++++++++++++++ files/ja/web/css/right/index.html | 141 -------------- files/ja/web/css/right/index.md | 141 ++++++++++++++ files/ja/web/css/top/index.html | 134 -------------- files/ja/web/css/top/index.md | 134 ++++++++++++++ files/ja/web/css/z-index/index.html | 137 -------------- files/ja/web/css/z-index/index.md | 137 ++++++++++++++ 16 files changed, 1596 insertions(+), 1596 deletions(-) delete mode 100644 files/ja/web/css/bottom/index.html create mode 100644 files/ja/web/css/bottom/index.md delete mode 100644 files/ja/web/css/clear/index.html create mode 100644 files/ja/web/css/clear/index.md delete mode 100644 files/ja/web/css/float/index.html create mode 100644 files/ja/web/css/float/index.md delete mode 100644 files/ja/web/css/left/index.html create mode 100644 files/ja/web/css/left/index.md delete mode 100644 files/ja/web/css/position/index.html create mode 100644 files/ja/web/css/position/index.md delete mode 100644 files/ja/web/css/right/index.html create mode 100644 files/ja/web/css/right/index.md delete mode 100644 files/ja/web/css/top/index.html create mode 100644 files/ja/web/css/top/index.md delete mode 100644 files/ja/web/css/z-index/index.html create mode 100644 files/ja/web/css/z-index/index.md diff --git a/files/ja/web/css/bottom/index.html b/files/ja/web/css/bottom/index.html deleted file mode 100644 index 92349fd4eb..0000000000 --- a/files/ja/web/css/bottom/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: bottom -slug: Web/CSS/bottom -tags: - - CSS - - CSS プロパティ - - CSS 位置指定レイアウト - - Reference -translation_of: Web/CSS/bottom ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/bottom.html")}}
- - - -

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

- - - -

{{cssxref("top")}} と bottom の両方が指定されており、 position が absolute または fixed に設定されており、かつ {{cssxref("height")}} が未指定 (auto または 100% のどちらか) の場合は、 top と bottom の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または position が relative に設定されていた場合は、 top プロパティが優先されて bottom プロパティは無視されます。

- -

構文

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

値

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

形式文法

- -{{csssyntax}} - -

例

- -

この例は、 {{cssxref("position")}} が absolute と fixed であった場合の bottom プロパティの動作の違いを示します。

- -

HTML

- -
<p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p>
-<div class="fixed"><p>Fixed</p></div>
-<div class="absolute"><p>Absolute</p></div>
- -

CSS

- -
p {
-  font-size: 30px;
-  line-height: 2em;
-}
-
-div {
-  width: 48%;
-  text-align: center;
-  background: rgba(55,55,55,.2);
-  border: 1px solid blue;
-}
-
-.absolute {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.fixed {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-}
- -

結果

- -

{{EmbedLiveSample('Example','500','250')}}

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/bottom/index.md b/files/ja/web/css/bottom/index.md new file mode 100644 index 0000000000..92349fd4eb --- /dev/null +++ b/files/ja/web/css/bottom/index.md @@ -0,0 +1,151 @@ +--- +title: bottom +slug: Web/CSS/bottom +tags: + - CSS + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference +translation_of: Web/CSS/bottom +--- +
{{CSSRef}}
+ +

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

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

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

+ + + +

{{cssxref("top")}} と bottom の両方が指定されており、 position が absolute または fixed に設定されており、かつ {{cssxref("height")}} が未指定 (auto または 100% のどちらか) の場合は、 top と bottom の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または position が relative に設定されていた場合は、 top プロパティが優先されて bottom プロパティは無視されます。

+ +

構文

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

値

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

形式文法

+ +{{csssyntax}} + +

例

+ +

この例は、 {{cssxref("position")}} が absolute と fixed であった場合の bottom プロパティの動作の違いを示します。

+ +

HTML

+ +
<p>This<br>is<br>some<br>tall,<br>tall,<br>tall,<br>tall,<br>tall<br>content.</p>
+<div class="fixed"><p>Fixed</p></div>
+<div class="absolute"><p>Absolute</p></div>
+ +

CSS

+ +
p {
+  font-size: 30px;
+  line-height: 2em;
+}
+
+div {
+  width: 48%;
+  text-align: center;
+  background: rgba(55,55,55,.2);
+  border: 1px solid blue;
+}
+
+.absolute {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+ +

結果

+ +

{{EmbedLiveSample('Example','500','250')}}

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/clear/index.html b/files/ja/web/css/clear/index.html deleted file mode 100644 index 8b3e1dab51..0000000000 --- a/files/ja/web/css/clear/index.html +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: clear -slug: Web/CSS/clear -tags: - - CSS - - CSS プロパティ - - CSS 位置指定レイアウト - - Reference -translation_of: Web/CSS/clear ---- -
{{CSSRef}}
- -

CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。 clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。

- -
{{EmbedInteractiveExample("pages/css/clear.html")}}
- - - -

非浮動ブロックに適用された場合は、その要素の境界の辺が、関係するすべての浮動要素のマージンの辺より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。

- -

一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。

- -

解除されることに関連する浮動要素は、その前の浮動要素と同一のブロック整形コンテキスト内の先行する浮動要素です。

- -
-

メモ: 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは clearfix と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} 疑似要素 に clear を使います。

- -
#container::after {
-  content: "";
-  display: block;
-  clear: both;
-}
-
-
- -

構文

- -
/* キーワード値 */
-clear: none;
-clear: left;
-clear: right;
-clear: both;
-clear: inline-start;
-clear: inline-end;
-
-/* グローバル値 */
-clear: inherit;
-clear: initial;
-clear: unset;
-
- -

値

- -
-
none
-
要素は先行するフロートと切り離されず、下に移動しません。
-
left
-
要素は先行する 左の フロートと切り離され、下に移動します。
-
right
-
要素は先行する 右の フロートと切り離され、下に移動します。
-
both
-
要素は先行する 左右両方の フロートと切り離され、下に移動します。
-
inline-start
-
要素は、先行する包含ブロックの始端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では左側、rtl 表記では右側のフロートです。
-
inline-end
-
要素は、先行する包含ブロックの終端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では右側、rtl 表記では左側のフロートです。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

clear: left

- -

HTML

- -
<div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
-  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-  <p class="left">This paragraph clears left.</p>
-</div>
-
- -

CSS

- -
.wrapper{
-  border:1px solid black;
-  padding:10px;
-}
-.left {
-  border: 1px solid black;
-  clear: left;
-}
-.black {
-  float: left;
-  margin: 0;
-  background-color: black;
-  color: #fff;
-  width: 20%;
-}
-.red {
-  float: left;
-  margin: 0;
-  background-color: pink;
-  width:20%;
-}
-p {
-  width: 50%;
-}
-
- -

{{ EmbedLiveSample('clear-left','100%','250') }}

- -

clear: right

- -

HTML

- -
<div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
-  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
-  <p class="right">This paragraph clears right.</p>
-</div>
-
- -

CSS

- -
.wrapper{
-  border:1px solid black;
-  padding:10px;
-}
-.right {
-  border: 1px solid black;
-  clear: right;
-}
-.black {
-  float: right;
-  margin: 0;
-  background-color: black;
-  color: #fff;
-  width:20%;
-}
-.red {
-  float: right;
-  margin: 0;
-  background-color: pink;
-  width:20%;
-}
-p {
-  width: 50%;
-}
- -

{{ EmbedLiveSample('clear-right','100%','250') }}

- -

clear: both

- -

HTML

- -
<div class="wrapper">
-  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
-  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
-  <p class="both">This paragraph clears both.</p>
-</div>
-
- -

CSS

- -
.wrapper{
-  border:1px solid black;
-  padding:10px;
-}
-.both {
-  border: 1px solid black;
-  clear: both;
-}
-.black {
-  float: left;
-  margin: 0;
-  background-color: black;
-  color: #fff;
-  width:20%;
-}
-.red {
-  float: right;
-  margin: 0;
-  background-color: pink;
-  width:20%;
-}
-p {
-  width: 45%;
-}
- -

{{ EmbedLiveSample('clear-both','100%','300') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}値 inline-start および inline-end を追加
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}重要な変更はないが、細部が明瞭になった
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/clear/index.md b/files/ja/web/css/clear/index.md new file mode 100644 index 0000000000..8b3e1dab51 --- /dev/null +++ b/files/ja/web/css/clear/index.md @@ -0,0 +1,235 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

CSS の clear プロパティは、要素が先行する浮動要素の下に移動 (clear) する必要があるかどうかを設定します。 clear プロパティは、浮動要素と非浮動要素のどちらにも適用されます。

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

非浮動ブロックに適用された場合は、その要素の境界の辺が、関係するすべての浮動要素のマージンの辺より下まで下に移動します。非浮動ブロックの上マージンは折り畳まれます。

+ +

一方で、二つの浮動要素の垂直マージンは折り畳まれません。浮動要素に適用された場合、下の要素のマージンの辺が、すべての関連する浮動要素のマージンの辺よりも下に移動します。これは後の浮動要素が前のものよりも高い位置に配置されることがないため、後の浮動要素の位置に影響します。

+ +

解除されることに関連する浮動要素は、その前の浮動要素と同一のブロック整形コンテキスト内の先行する浮動要素です。

+ +
+

メモ: 浮動要素しか包含しない要素は、高さがなくなります。このような要素を常にリサイズ可能にして浮動要素を包含するようにしたい場合は、その子要素自身に clear を設定しなければなりません。これは clearfix と呼ばれます。また、実現方法のひとつとして、置換 {{cssxref("::after")}} 疑似要素 に clear を使います。

+ +
#container::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+
+ +

構文

+ +
/* キーワード値 */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* グローバル値 */
+clear: inherit;
+clear: initial;
+clear: unset;
+
+ +

値

+ +
+
none
+
要素は先行するフロートと切り離されず、下に移動しません。
+
left
+
要素は先行する 左の フロートと切り離され、下に移動します。
+
right
+
要素は先行する 右の フロートと切り離され、下に移動します。
+
both
+
要素は先行する 左右両方の フロートと切り離され、下に移動します。
+
inline-start
+
要素は、先行する包含ブロックの始端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では左側、rtl 表記では右側のフロートです。
+
inline-end
+
要素は、先行する包含ブロックの終端側のフロートの下に移動することを示すキーワードです。これは ltr 表記では右側、rtl 表記では左側のフロートです。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

clear: left

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">This paragraph clears left.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+
+ +

{{ EmbedLiveSample('clear-left','100%','250') }}

+ +

clear: right

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">This paragraph clears right.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+ +

{{ EmbedLiveSample('clear-right','100%','250') }}

+ +

clear: both

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">This paragraph clears both.</p>
+</div>
+
+ +

CSS

+ +
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}
+ +

{{ EmbedLiveSample('clear-both','100%','300') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}値 inline-start および inline-end を追加
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}重要な変更はないが、細部が明瞭になった
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/float/index.html b/files/ja/web/css/float/index.html deleted file mode 100644 index 6a6a6f3315..0000000000 --- a/files/ja/web/css/float/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: float -slug: Web/CSS/float -tags: - - CSS - - CSS Positioning - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/float ---- -
{{CSSRef}}
- -

float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。

- -
{{EmbedInteractiveExample("pages/css/float.html")}}
- - - -

浮動要素 (floating element) とは、float の計算値が none 以外の要素です。

- -

float は暗黙的にブロックレイアウトの使用を意味しており、 {{cssxref("display")}} の計算値を変更する場合があります。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
指定値計算値
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
その他変更されません
- -
注: JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは float に対応していますが、古いブラウザーは cssFloat という綴りになり、 Internet Explorer のバージョン 8 以前では、 styleFloat を使用しています。これは、ダッシュ区切りの CSS 名は DOM メンバーとしてキャメルケースで綴るというルールの例外でした (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 <label> の "for" を "htmlFor" とする必要があったりするのと同じです)。
- -

構文

- -
/* キーワード値 */
-float: left;
-float: right;
-float: none;
-float: inline-start;
-float: inline-end;
-
-/* グローバル値 */
-float: inherit;
-float: initial;
-float: unset;
-
- -

float プロパティは、以下の値からひとつのキーワードを選択して指定します。

- -

値

- -
-
left
-
要素は、必ずその包含ブロックの左側に浮動します。
-
right
-
要素は、必ずその包含ブロックの右側に浮動します。
-
none
-
要素は決して浮動しません。
-
inline-start
-
要素は、必ずその包含ブロックの始端側に浮動します。 ltr 表記では左側、 rtl 表記では右側になります。
-
inline-end
-
要素は、必ずその包含ブロックの終端側に浮動します。 ltr 表記では右側、 rtl 表記では左側になります。
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

浮動要素の位置をどのように決めるか

- -

上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか他の浮動要素の辺に触れるまで、左側または右側に移動させられます。

- -

この例では、3つの赤い正方形があります。このうち2つは左側に浮動しており、1つは右側に浮動しています。2つめの「左の」赤い正方形は、1つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。

- -

浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を width: 100% かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。

- -

HTML

- -
<section>
-  <div class="left">1</div>
-  <div class="left">2</div>
-  <div class="right">3</div>
-  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
-     lectus vulputate. Donec id iaculis velit. Aliquam vel
-     malesuada erat. Praesent non magna ac massa aliquet tincidunt
-     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
-</section>
-
- -

CSS

- -
section {
-  border: 1px solid blue;
-  width: 100%;
-  float: left;
-}
-
-div {
-  margin: 5px;
-  width: 50px;
-  height: 150px;
-}
-
-.left {
-  float: left;
-  background: pink;
-}
-
-.right {
-  float: right;
-  background: cyan;
-}
- -

結果

- -

{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}

- -

浮動の解除

- -

あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については {{cssxref("clear")}} をご覧ください。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}値 inline-start および inline-end を追加
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/float/index.md b/files/ja/web/css/float/index.md new file mode 100644 index 0000000000..6a6a6f3315 --- /dev/null +++ b/files/ja/web/css/float/index.md @@ -0,0 +1,227 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/float +--- +
{{CSSRef}}
+ +

float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。要素はウェブページの通常のフローから外れますが、 (絶対位置指定 とは対照的に) フローの一部であり続けます。

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

浮動要素 (floating element) とは、float の計算値が none 以外の要素です。

+ +

float は暗黙的にブロックレイアウトの使用を意味しており、 {{cssxref("display")}} の計算値を変更する場合があります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
指定値計算値
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
inline-flexflex
inline-gridgrid
その他変更されません
+ +
注: JavaScript で {{domxref("HTMLElement.style")}} オブジェクトのメンバーとしてこのプロパティを参照する場合、最近のブラウザーは float に対応していますが、古いブラウザーは cssFloat という綴りになり、 Internet Explorer のバージョン 8 以前では、 styleFloat を使用しています。これは、ダッシュ区切りの CSS 名は DOM メンバーとしてキャメルケースで綴るというルールの例外でした (これは "float" が JavaScript の予約語であるためで、 "class" を "className" とする必要があったり、 <label> の "for" を "htmlFor" とする必要があったりするのと同じです)。
+ +

構文

+ +
/* キーワード値 */
+float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* グローバル値 */
+float: inherit;
+float: initial;
+float: unset;
+
+ +

float プロパティは、以下の値からひとつのキーワードを選択して指定します。

+ +

値

+ +
+
left
+
要素は、必ずその包含ブロックの左側に浮動します。
+
right
+
要素は、必ずその包含ブロックの右側に浮動します。
+
none
+
要素は決して浮動しません。
+
inline-start
+
要素は、必ずその包含ブロックの始端側に浮動します。 ltr 表記では左側、 rtl 表記では右側になります。
+
inline-end
+
要素は、必ずその包含ブロックの終端側に浮動します。 ltr 表記では右側、 rtl 表記では左側になります。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

浮動要素の位置をどのように決めるか

+ +

上述のとおり、要素は浮動すると、文書の通常のフローから外されます (ただし、フローの一部であり続けます)。浮動要素は、包含ブロックか他の浮動要素の辺に触れるまで、左側または右側に移動させられます。

+ +

この例では、3つの赤い正方形があります。このうち2つは左側に浮動しており、1つは右側に浮動しています。2つめの「左の」赤い正方形は、1つめの正方形の右に置かれていることに注意してください。正方形を追加していくと、包含ボックスが埋まるまではその右側に詰め込まれていきますが、その後は次の行に回り込みます。

+ +

浮動要素は、少なくともその中に含まれるもっとも高い子の浮動要素と同じ高さでなければなりません。ここでは親を width: 100% かつ浮動要素として、その子の浮動要素を配置するのに十分な高さを確保し、親の幅を保証することで、子孫を浮動解除する必要がなくなるようにしています。

+ +

HTML

+ +
<section>
+  <div class="left">1</div>
+  <div class="left">2</div>
+  <div class="right">3</div>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
+     lectus vulputate. Donec id iaculis velit. Aliquam vel
+     malesuada erat. Praesent non magna ac massa aliquet tincidunt
+     vel in massa. Phasellus feugiat est vel leo finibus congue.</p>
+</section>
+
+ +

CSS

+ +
section {
+  border: 1px solid blue;
+  width: 100%;
+  float: left;
+}
+
+div {
+  margin: 5px;
+  width: 50px;
+  height: 150px;
+}
+
+.left {
+  float: left;
+  background: pink;
+}
+
+.right {
+  float: right;
+  background: cyan;
+}
+ +

結果

+ +

{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}

+ +

浮動の解除

+ +

あるアイテムを浮動要素の下へ強制的に移動したいことがあるでしょう。例えば、段落は浮動要素に隣接させたいが、見出しは強制的に単独の行にしたい場合があるでしょう。この例については {{cssxref("clear")}} をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}値 inline-start および inline-end を追加
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/left/index.html b/files/ja/web/css/left/index.html deleted file mode 100644 index d0a7275f65..0000000000 --- a/files/ja/web/css/left/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/left/index.md b/files/ja/web/css/left/index.md new file mode 100644 index 0000000000..d0a7275f65 --- /dev/null +++ b/files/ja/web/css/left/index.md @@ -0,0 +1,226 @@ +--- +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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/position/index.html b/files/ja/web/css/position/index.html deleted file mode 100644 index f96bed35f0..0000000000 --- a/files/ja/web/css/position/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: position -slug: Web/CSS/position -tags: - - CSS - - CSS Positioning - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/position ---- -
{{CSSRef}}
- -

position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティが、配置された要素の最終的な位置を決めます。

- -
{{EmbedInteractiveExample("pages/css/position.html")}}
- - - -

構文

- -

position プロパティは以下のキーワード値、グローバル値から１つを指定します。

- -

値

- -
-
static
-
要素は文書の通常のフローに従って配置されます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} プロパティは効果がありません。これが既定値です。
-
relative
-
要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が static であった時と同じです。
-
z-index の値が auto でない場合、新しい重ね合わせコンテキストを生成します。 table-*-group, table-row, table-column, table-cell, table-caption の要素における効果は未定義です。
-
absolute
-
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は top, right, bottom, left の値によって決定されます。
-
この値では、 z-index の値が auto ではない場合、新しい重ね合わせコンテキストを作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと相殺されません。
-
fixed
-
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。{{glossary("viewport", "ビューポート")}}によって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している perspective と filter に矛盾のあるブラウザーがあります。) 最終的な位置は top, right, bottom, left の値によって決定されます。
-
この値は、常に新しい重ね合わせコンテキストを作成します。印刷文書の場合、要素は各ページの同じ位置に配置されます。
-
sticky
-
要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。
-
この値は、常に新しい重ね合わせコンテキストを生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (overflow が hidden, scroll, auto, overlay として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (GitHub issue on W3C CSSWG を参照)。
-
- -

解説

- -

位置の種類

- - - -

ほとんどの場合、絶対位置指定要素に {{Cssxref("height")}} および {{Cssxref("width")}} が auto が設定されると、内容に合うように大きさが調整されます。しかし、非置換要素で絶対位置指定要素は、 {{Cssxref("top")}} および {{Cssxref("bottom")}} を指定して {{Cssxref("height")}} を指定しない (つまり auto の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 {{Cssxref("left")}} および {{Cssxref("right")}} を指定して {{Cssxref("width")}} を auto のままにすることで、利用できる水平の空間を埋めることができます。

- -

以下に記述された場合を除きます (絶対位置指定要素で利用できる空間を埋める場合)。

- - - -

アクセシビリティの考慮

- -

absolute または fixed の値で配置された要素は、ページがズームしてテキストの大きさを大きくしたら、その他の要素を妨害していないかどうかを確認してください。

- - - -

パフォーマンスとアクセシビリティ

- -

fixed または sticky を含む要素の内容をスクロールすると、パフォーマンスやアクセシビリティの問題を引き起こす可能性があります。ユーザーがスクロールする際、ブラウザーは sticky や fixed のコンテンツを新しい場所に再描画しなければなりません。再描画する必要があるコンテンツ、ブラウザーの性能や、端末の処理速度によっては、ブラウザーは 60 fps で再描画を管理することができず、敏感な人々にアクセシビリティの問題を起こし、誰からも汚く見えることになります。一つの解決方法として、位置配置要素に {{cssxref("will-change", "will-change: transform")}} を追加して要素を独自のレイヤーで描画させるようにすると、再描画の速度が上がり、性能問題やアクセシビリティを改善することができます。

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

相対位置指定

- -

相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。以下の例では、 "Two" が通常の位置に空間を得ているように他の要素が配置されることに注意してください。

- -

HTML

- -
<div class="box" id="one">One</div>
-<div class="box" id="two">Two</div>
-<div class="box" id="three">Three</div>
-<div class="box" id="four">Four</div>
-
- -

CSS

- -
* {
-  box-sizing: border-box;
-}
-
-.box {
-  display: inline-block;
-  width: 100px;
-  height: 100px;
-  background: red;
-  color: white;
-}
-
-#two {
-  position: relative;
-  top: 20px;
-  left: 20px;
-  background: blue;
-}
-
- -

{{EmbedLiveSample('Relative_positioning', '', '200px')}}

- -

絶対位置指定

- -

相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は配置された直近の祖先 (つまり、 static ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — W3C の定義も御覧ください) すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。

- -

HTML

- -
<h1>Absolute positioning</h1>
-
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -

CSS

- -
* {
-  box-sizing: border-box;
-}
-
-body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: aqua;
-  border: 3px solid blue;
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: red;
-  border: 1px solid black;
-}
-
-.positioned {
-  position: absolute;
-  background: yellow;
-  top: 30px;
-  left: 30px;
-}
- -

結果

- -

{{EmbedLiveSample('Absolute_positioning', '', '420px')}}

- -

固定位置指定

- -

固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。これはよく、ページをスクロールしても同位置に留まり続けるような「浮く」要素 ("floating" element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 10px の位置に固定されます。スクロールしても、ビューポートに対して同じ位置に留まり続けます。

- -

HTML

- -
<div class="outer">
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
-    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
-    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
-    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
-    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
-    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
-    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
-  </p>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
-    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
-    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
-    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
-    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
-    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
-    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
-  </p>
-  <div class="box" id="one">One</div>
-</div>
-
- -

CSS

- -
* {
-  box-sizing: border-box;
-}
-
-.box {
-  width: 100px;
-  height: 100px;
-  background: red;
-  color: white;
-}
-
-#one {
-  position: fixed;
-  top: 80px;
-  left: 10px;
-  background: blue;
-}
-
-.outer {
-  width: 500px;
-  height: 300px;
-  overflow: scroll;
-  padding-left: 150px;
-}
-
- -

結果

- -

{{EmbedLiveSample('Fixed_positioning', '', '300px')}}

- -

粘着位置指定

- -

粘着位置指定は、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。例えば・・・

- -
#one { position: sticky; top: 10px; }
- -

例えば上記のスタイルは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。

- -

粘着位置指定は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。

- -

粘着位置指定を想定したとおりに動作させるためには、 top, right, bottom, left のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。

- -

HTML

- -
<dl>
-  <div>
-    <dt>A</dt>
-    <dd>Andrew W.K.</dd>
-    <dd>Apparat</dd>
-    <dd>Arcade Fire</dd>
-    <dd>At The Drive-In</dd>
-    <dd>Aziz Ansari</dd>
-  </div>
-  <div>
-    <dt>C</dt>
-    <dd>Chromeo</dd>
-    <dd>Common</dd>
-    <dd>Converge</dd>
-    <dd>Crystal Castles</dd>
-    <dd>Cursive</dd>
-  </div>
-  <div>
-    <dt>E</dt>
-    <dd>Explosions In The Sky</dd>
-  </div>
-  <div>
-    <dt>T</dt>
-    <dd>Ted Leo &amp; The Pharmacists</dd>
-    <dd>T-Pain</dd>
-    <dd>Thrice</dd>
-    <dd>TV On The Radio</dd>
-    <dd>Two Gallants</dd>
-  </div>
-</dl>
-
- -

CSS

- -
* {
-  box-sizing: border-box;
-}
-
-dl > div {
-  background: #FFF;
-  padding: 24px 0 0 0;
-}
-
-dt {
-  background: #B8C1C8;
-  border-bottom: 1px solid #989EA4;
-  border-top: 1px solid #717D85;
-  color: #FFF;
-  font: bold 18px/21px Helvetica, Arial, sans-serif;
-  margin: 0;
-  padding: 2px 0 0 12px;
-  position: -webkit-sticky;
-  position: sticky;
-  top: -1px;
-}
-
-dd {
-  font: bold 20px/45px Helvetica, Arial, sans-serif;
-  margin: 0;
-  padding: 0 0 0 12px;
-  white-space: nowrap;
-}
-
-dd + dd {
-  border-top: 1px solid #CCC;
-}
-
- -

結果

- -

{{EmbedLiveSample('Sticky_positioning', '', '300px')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}sticky 値を追加。
- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/position/index.md b/files/ja/web/css/position/index.md new file mode 100644 index 0000000000..f96bed35f0 --- /dev/null +++ b/files/ja/web/css/position/index.md @@ -0,0 +1,345 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/position +--- +
{{CSSRef}}
+ +

position は CSS のプロパティで、文書内で要素がどのように配置されるかを設定します。 {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, {{Cssxref("left")}} の各プロパティが、配置された要素の最終的な位置を決めます。

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

構文

+ +

position プロパティは以下のキーワード値、グローバル値から１つを指定します。

+ +

値

+ +
+
static
+
要素は文書の通常のフローに従って配置されます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} プロパティは効果がありません。これが既定値です。
+
relative
+
要素は文書の通常のフローに従って配置され、 top, right, bottom, left の値に基づいて自分自身からの相対オフセットで配置されます。オフセットは他の要素の配置には影響を与えません。つまり、ページレイアウト内で要素に与えられる空間は、位置が static であった時と同じです。
+
z-index の値が auto でない場合、新しい重ね合わせコンテキストを生成します。 table-*-group, table-row, table-column, table-cell, table-caption の要素における効果は未定義です。
+
absolute
+
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。直近の配置されている祖先があれば、それに対して相対配置されます。そうでなければ、初期の包含ブロックに対して相対配置されます。最終的な位置は top, right, bottom, left の値によって決定されます。
+
この値では、 z-index の値が auto ではない場合、新しい重ね合わせコンテキストを作成します。絶対位置指定ボックスのマージンは、他の要素のマージンと相殺されません。
+
fixed
+
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。{{glossary("viewport", "ビューポート")}}によって定められた初期の包含ブロックに対して相対配置されますが、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。 (なお、包含ブロック形成に寄与している perspective と filter に矛盾のあるブラウザーがあります。) 最終的な位置は top, right, bottom, left の値によって決定されます。
+
この値は、常に新しい重ね合わせコンテキストを作成します。印刷文書の場合、要素は各ページの同じ位置に配置されます。
+
sticky
+
要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。
+
この値は、常に新しい重ね合わせコンテキストを生成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (overflow が hidden, scroll, auto, overlay として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (GitHub issue on W3C CSSWG を参照)。
+
+ +

解説

+ +

位置の種類

+ + + +

ほとんどの場合、絶対位置指定要素に {{Cssxref("height")}} および {{Cssxref("width")}} が auto が設定されると、内容に合うように大きさが調整されます。しかし、非置換要素で絶対位置指定要素は、 {{Cssxref("top")}} および {{Cssxref("bottom")}} を指定して {{Cssxref("height")}} を指定しない (つまり auto の) ままにすることで、利用できる垂直の空間を埋めることができます。同様に、 {{Cssxref("left")}} および {{Cssxref("right")}} を指定して {{Cssxref("width")}} を auto のままにすることで、利用できる水平の空間を埋めることができます。

+ +

以下に記述された場合を除きます (絶対位置指定要素で利用できる空間を埋める場合)。

+ + + +

アクセシビリティの考慮

+ +

absolute または fixed の値で配置された要素は、ページがズームしてテキストの大きさを大きくしたら、その他の要素を妨害していないかどうかを確認してください。

+ + + +

パフォーマンスとアクセシビリティ

+ +

fixed または sticky を含む要素の内容をスクロールすると、パフォーマンスやアクセシビリティの問題を引き起こす可能性があります。ユーザーがスクロールする際、ブラウザーは sticky や fixed のコンテンツを新しい場所に再描画しなければなりません。再描画する必要があるコンテンツ、ブラウザーの性能や、端末の処理速度によっては、ブラウザーは 60 fps で再描画を管理することができず、敏感な人々にアクセシビリティの問題を起こし、誰からも汚く見えることになります。一つの解決方法として、位置配置要素に {{cssxref("will-change", "will-change: transform")}} を追加して要素を独自のレイヤーで描画させるようにすると、再描画の速度が上がり、性能問題やアクセシビリティを改善することができます。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

相対位置指定

+ +

相対位置指定の要素は文書中の通常の配置から、指定された量だけオフセットしますが、ほかの要素にはオフセットの影響を与えません。以下の例では、 "Two" が通常の位置に空間を得ているように他の要素が配置されることに注意してください。

+ +

HTML

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+
+ +

{{EmbedLiveSample('Relative_positioning', '', '200px')}}

+ +

絶対位置指定

+ +

相対位置指定の要素も、文書の通常のフローの中に配置されます。それに対して、絶対位置指定の要素はフローから除外されます。つまり、他の要素はこの要素が存在しないかのように配置されます。絶対位置指定の要素は配置された直近の祖先 (つまり、 static ではない直近の祖先) に対して相対的に配置されます。配置された祖先がない場合は、 ICB (initial containing block — W3C の定義も御覧ください) すなわち文書のルート要素の包含ブロックに対する相対的な配置になります。

+ +

HTML

+ +
<h1>Absolute positioning</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+
+.positioned {
+  position: absolute;
+  background: yellow;
+  top: 30px;
+  left: 30px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Absolute_positioning', '', '420px')}}

+ +

固定位置指定

+ +

固定位置指定は絶対位置指定に似ていますが、要素の包含ブロックがビューポートによって定義される初期包含ブロックであるという点が異なり、祖先の一つに transform, perspective, filter の何れかのプロパティが none 以外 (CSS Transforms Spec を参照) に設定されている場合は例外で、その場合は祖先が包含ブロックとしてふるまいます。これはよく、ページをスクロールしても同位置に留まり続けるような「浮く」要素 ("floating" element) を作るのに使われます。下の例ではボックス "One" はページの上から 80px、左から 10px の位置に固定されます。スクロールしても、ビューポートに対して同じ位置に留まり続けます。

+ +

HTML

+ +
<div class="outer">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <div class="box" id="one">One</div>
+</div>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Fixed_positioning', '', '300px')}}

+ +

粘着位置指定

+ +

粘着位置指定は、相対位置指定と固定位置指定を組み合わせたものです。粘着位置指定された要素は、指定したしきい値に達するまでは相対位置指定として、しきい値に達したら固定位置指定として扱われます。例えば・・・

+ +
#one { position: sticky; top: 10px; }
+ +

例えば上記のスタイルは、ビューポートをスクロールして要素の位置が上端から 10px より小さくなるまでは、相対位置指定の要素としてふるまいます。それ以降はしきい値を超えるほどビューポートのスクロールを戻すまで、上端から 10px で固定位置指定になります。

+ +

粘着位置指定は一般的に、アルファベット順や五十音順のリストの見出しに使用されます。見出し A の項目をスクリーン外にスクロールするまで、見出し B は A の項目の後ろに表示されています。見出し B はコンテンツの残りの部分とともにスクリーン外に移動するのではなく、見出し B のすべての項目をスクリーン外にスクロールして見出し C に含まれる部分に達するまで、ビューポートの上部に固定されます。

+ +

粘着位置指定を想定したとおりに動作させるためには、 top, right, bottom, left のうち少なくとも一つでしきい値を指定しなければなりません。しきい値を指定しなければ、相対位置指定との違いがなくなるでしょう。

+ +

HTML

+ +
<dl>
+  <div>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </div>
+  <div>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </div>
+  <div>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </div>
+  <div>
+    <dt>T</dt>
+    <dd>Ted Leo &amp; The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </div>
+</dl>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+dl > div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Sticky_positioning', '', '300px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}sticky 値を追加。
+ +

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/right/index.html b/files/ja/web/css/right/index.html deleted file mode 100644 index 91156b300d..0000000000 --- a/files/ja/web/css/right/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/right/index.md b/files/ja/web/css/right/index.md new file mode 100644 index 0000000000..91156b300d --- /dev/null +++ b/files/ja/web/css/right/index.md @@ -0,0 +1,141 @@ +--- +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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/top/index.html b/files/ja/web/css/top/index.html deleted file mode 100644 index c6ff6fb4bc..0000000000 --- a/files/ja/web/css/top/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: top -slug: Web/CSS/top -tags: - - CSS - - CSS Positioning - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/top ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/top.html")}}
- - - -

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

- - - -

top と {{cssxref("bottom")}} の両方が指定されており、 position が absolute または fixed に設定されており、かつ {{cssxref("height")}} が未指定 (auto または 100% のどちらか) の場合は、 top と bottom の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または position が relative に設定されていた場合は、 top プロパティが優先されて bottom プロパティは無視されます。

- -

構文

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

値

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

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -
body {
-  background: beige;
-}
-
-div {
-  position: absolute;
-  top: 10%;
-  right: 40%;
-  bottom: 20%;
-  left: 15%;
-  background: gold;
-  border: 1px solid blue;
-}
- -
<div>この内容の寸法は、辺の位置によって決まります。</div>
- -

{{EmbedLiveSample('Examples','100%','200')}}

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/top/index.md b/files/ja/web/css/top/index.md new file mode 100644 index 0000000000..c6ff6fb4bc --- /dev/null +++ b/files/ja/web/css/top/index.md @@ -0,0 +1,134 @@ +--- +title: top +slug: Web/CSS/top +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/top +--- +
{{CSSRef}}
+ +

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

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

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

+ + + +

top と {{cssxref("bottom")}} の両方が指定されており、 position が absolute または fixed に設定されており、かつ {{cssxref("height")}} が未指定 (auto または 100% のどちらか) の場合は、 top と bottom の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または position が relative に設定されていた場合は、 top プロパティが優先されて bottom プロパティは無視されます。

+ +

構文

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

値

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

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
body {
+  background: beige;
+}
+
+div {
+  position: absolute;
+  top: 10%;
+  right: 40%;
+  bottom: 20%;
+  left: 15%;
+  background: gold;
+  border: 1px solid blue;
+}
+ +
<div>この内容の寸法は、辺の位置によって決まります。</div>
+ +

{{EmbedLiveSample('Examples','100%','200')}}

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/z-index/index.html b/files/ja/web/css/z-index/index.html deleted file mode 100644 index 18fc3d358e..0000000000 --- a/files/ja/web/css/z-index/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: z-index -slug: Web/CSS/z-index -tags: - - CSS - - CSS プロパティ - - CSS 位置指定レイアウト - - Reference -translation_of: Web/CSS/z-index ---- -
{{CSSRef}}
- -

CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。

- -
{{EmbedInteractiveExample("pages/css/z-index.html")}}
- - - -

位置指定されたボックス (つまり、 position が static 以外のもの) では、 z-index プロパティが以下のことを定義します。

- -
    -
  1. 現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
    2. -
  2. ボックスがローカルな重ね合わせコンテキストを作るかどうか
    3. -
- -

構文

- -
/* キーワード値 */
-z-index: auto;
-
-/* <integer> 値 */
-z-index: 0;
-z-index: 3;
-z-index: 289;
-z-index: -1; /* 負の数は優先度を下げる */
-
-/* グローバル値 */
-z-index: inherit;
-z-index: initial;
-z-index: unset;
-
- -

z-index プロパティは、キーワード auto 又は <integer> のどちらかで指定します。

- -

値

- -
-
auto
-
ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。
-
<integer>
-
この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル 0 のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div class="dashed-box">Dashed box
-  <span class="gold-box">Gold box</span>
-  <span class="green-box">Green box</span>
-</div>
-
- -

CSS

- -
.dashed-box {
-  position: relative;
-  z-index: 1;
-  border: dashed;
-  height: 8em;
-  margin-bottom: 1em;
-  margin-top: 2em;
-}
-.gold-box {
-  position: absolute;
-  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
-  background: gold;
-  width: 80%;
-  left: 60px;
-  top: 3em;
-}
-.green-box {
-  position: absolute;
-  z-index: 2; /* put .green-box above .dashed-box */
-  background: lightgreen;
-  width: 20%;
-  left: 65%;
-  top: -25px;
-  height: 7em;
-  opacity: 0.9;
-}
-
- -

結果

- -

{{ EmbedLiveSample('Examples', '550', '200', '') }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}z-index をアニメーション可能として定義
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.z-index")}}

- -

関連情報

- - diff --git a/files/ja/web/css/z-index/index.md b/files/ja/web/css/z-index/index.md new file mode 100644 index 0000000000..18fc3d358e --- /dev/null +++ b/files/ja/web/css/z-index/index.md @@ -0,0 +1,137 @@ +--- +title: z-index +slug: Web/CSS/z-index +tags: + - CSS + - CSS プロパティ + - CSS 位置指定レイアウト + - Reference +translation_of: Web/CSS/z-index +--- +
{{CSSRef}}
+ +

CSS の z-index プロパティは、位置指定要素とその子孫要素、またはフレックスアイテムの z 順を定義します。より大きな z-index を持つ要素はより小さな要素の上に重なります。

+ +
{{EmbedInteractiveExample("pages/css/z-index.html")}}
+ + + +

位置指定されたボックス (つまり、 position が static 以外のもの) では、 z-index プロパティが以下のことを定義します。

+ +
    +
  1. 現在の重ね合わせコンテキストにおけるボックスの重ね合わせレベル
    2. +
  2. ボックスがローカルな重ね合わせコンテキストを作るかどうか
    3. +
+ +

構文

+ +
/* キーワード値 */
+z-index: auto;
+
+/* <integer> 値 */
+z-index: 0;
+z-index: 3;
+z-index: 289;
+z-index: -1; /* 負の数は優先度を下げる */
+
+/* グローバル値 */
+z-index: inherit;
+z-index: initial;
+z-index: unset;
+
+ +

z-index プロパティは、キーワード auto 又は <integer> のどちらかで指定します。

+ +

値

+ +
+
auto
+
ボックスはローカルな重ね合わせコンテキストを新たに作りません。現在の重ね合わせコンテキストで作られたボックスは、親ボックスと同じ重ね合わせレベルを持ちます。
+
<integer>
+
この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル 0 のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div class="dashed-box">Dashed box
+  <span class="gold-box">Gold box</span>
+  <span class="green-box">Green box</span>
+</div>
+
+ +

CSS

+ +
.dashed-box {
+  position: relative;
+  z-index: 1;
+  border: dashed;
+  height: 8em;
+  margin-bottom: 1em;
+  margin-top: 2em;
+}
+.gold-box {
+  position: absolute;
+  z-index: 3; /* put .gold-box above .green-box and .dashed-box */
+  background: gold;
+  width: 80%;
+  left: 60px;
+  top: 3em;
+}
+.green-box {
+  position: absolute;
+  z-index: 2; /* put .green-box above .dashed-box */
+  background: lightgreen;
+  width: 20%;
+  left: 65%;
+  top: -25px;
+  height: 7em;
+  opacity: 0.9;
+}
+
+ +

結果

+ +

{{ EmbedLiveSample('Examples', '550', '200', '') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions', '#animatable-css', 'animation behavior for z-index')}}{{Spec2('CSS3 Transitions')}}z-index をアニメーション可能として定義
{{SpecName('CSS2.1', 'visuren.html#z-index', 'z-index')}}{{Spec2('CSS2.1')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.z-index")}}

+ +

関連情報

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