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/top/index.md | 167 +++++++++++++++++++----------------------- 1 file changed, 74 insertions(+), 93 deletions(-) (limited to 'files/ja/web/css/top/index.md') diff --git a/files/ja/web/css/top/index.md b/files/ja/web/css/top/index.md index c6ff6fb4bc..87b3c530cd 100644 --- a/files/ja/web/css/top/index.md +++ b/files/ja/web/css/top/index.md @@ -3,38 +3,36 @@ title: top slug: Web/CSS/top tags: - CSS - - CSS Positioning - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 位置指定レイアウト + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.top translation_of: Web/CSS/top --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`top`** は [CSS](/ja/docs/Web/CSS) のプロパティで、[位置指定要素](/ja/docs/Web/CSS/position)の垂直位置の決定に関与します。位置指定されていない要素には効果はありません。 -
{{EmbedInteractiveExample("pages/css/top.html")}}
+{{EmbedInteractiveExample("pages/css/top.html")}} - +`top` の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。 -

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

+- `position` が `absolute` または `fixed` に設定されている場合、 `top` プロパティは要素の上辺と包含ブロックの上辺との間の距離を指定します。 +- `position` が `relative` に設定されている場合、 `top` プロパティは要素の上辺が通常位置から下方へ移動する量を指定します。 +- `position` が `sticky` に設定されている場合、 `top` プロパティは粘着制約矩形の計算に使用されます。 +- `position` が `static` に設定されている場合、 `top` プロパティは*効果がありません*。 - +`top` と {{cssxref("bottom")}} の両方が指定されており、 `position` が `absolute` または `fixed` に設定されており、*かつ* {{cssxref("height")}} が未指定 (`auto` または `100%` のどちらか) の場合は、 `top` と `bottom` の距離が尊重されます。それ以外の場合、 {{cssxref("height")}} が何らかの形で制約されていた場合、または `position` が `relative` に設定されていた場合は、 `top` プロパティが優先されて `bottom` プロパティは無視されます。 -

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

+## 構文 -

構文

- -
/* <length> 値 */
+```css
+/*  値 */
 top: 3px;
 top: 2.4em;
 
-/* 包含ブロックの高さに対する <percentage> */
+/* 包含ブロックの高さに対する  */
 top: 10%;
 
 /* キーワード値 */
@@ -43,43 +41,45 @@ top: auto;
 /* グローバル値 */
 top: inherit;
 top: initial;
+top: revert;
 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}}

- -

形式文法

+``` + +### 値 + +- {{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}} -

例

+

例

+ +### 位置指定要素を上から 10% に設定 -
body {
+```css
+body {
   background: beige;
 }
 
@@ -91,44 +91,25 @@ div {
   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")}}

- -

関連情報

- - +} +``` + +```html +
この内容の寸法は、辺の位置によって決まります。
+``` + +{{EmbedLiveSample('Examples','100%','200')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{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