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/bottom/index.md | 174 ++++++++++++++++++--------------------- 1 file changed, 79 insertions(+), 95 deletions(-) (limited to 'files/ja/web/css/bottom') diff --git a/files/ja/web/css/bottom/index.md b/files/ja/web/css/bottom/index.md index 92349fd4eb..e4b00229ac 100644 --- a/files/ja/web/css/bottom/index.md +++ b/files/ja/web/css/bottom/index.md @@ -3,37 +3,36 @@ title: bottom slug: Web/CSS/bottom tags: - CSS - - CSS プロパティ - CSS 位置指定レイアウト - - Reference + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.bottom translation_of: Web/CSS/bottom --- -
{{CSSRef}}
- -

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

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

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

+`bottom` の効果は、要素がどの様に配置されているか (つまり、 {{cssxref("position")}} プロパティの値) によって変わります。 - +- `position` が `absolute` または `fixed` に設定されている場合、 `bottom` プロパティは要素の下辺と包含ブロックの下辺との間の距離を指定します。 +- `position` が `relative` に設定されている場合、 `bottom` プロパティは要素の下辺が通常位置から上方向へ移動する量を指定します。 +- `position` が `sticky` に設定されている場合、 `bottom` プロパティは sticky 制約の矩形を計算するために使用されます。 +- `position` が `static` に設定されている場合、 `bottom` プロパティは*効果がありません*。 -

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

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

構文

+## 構文 -
/* <length> 値 */
+```css
+/*  値 */
 bottom: 3px;
 bottom: 2.4em;
 
-/* 内包ブロックの高さに対する <percentage> */
+/* 包含ブロックの高さに対する  */
 bottom: 10%;
 
 /* キーワード値 */
@@ -42,49 +41,57 @@ bottom: auto;
 /* グローバル値 */
 bottom: inherit;
 bottom: initial;
+bottom: revert;
 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 キーワードと同様に扱われます。
-
- -

形式文法

+``` + +### 値 + +- {{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` キーワードと同様に扱われます。 + +## 公式定義 + +{{cssinfo}} + +## 形式定義 {{csssyntax}} -

例

+## 例 + +

絶対位置指定と固定位置指定

-

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

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

HTML

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

This
is
some
tall,
tall,
tall,
tall,
tall
content.

+

Fixed

+

Absolute

+``` -

CSS

+#### CSS -
p {
+```css
+p {
   font-size: 30px;
   line-height: 2em;
 }
@@ -106,46 +113,23 @@ div {
   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")}}

- -

関連情報

- - +} +``` + +### 結果 + +{{EmbedLiveSample('Absolute_and_fixed_positioning','500','250')}} + +## 仕様書 + +{{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