From 3749b3f9c22c5ca41293cf770cfb6aab216e3ead Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 17 Nov 2021 02:16:00 +0900 Subject: CSS 論理的プロパティに関するその他のプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/16 時点の英語版に同期 --- files/ja/web/css/inset-block-end/index.md | 111 +++++++--------- files/ja/web/css/inset-block-start/index.md | 110 +++++++--------- files/ja/web/css/inset-block/index.md | 123 ++++++++---------- files/ja/web/css/inset-inline-end/index.md | 111 +++++++--------- files/ja/web/css/inset-inline-start/index.md | 113 ++++++++-------- files/ja/web/css/inset-inline/index.md | 123 ++++++++---------- files/ja/web/css/inset/index.md | 114 ++++++++-------- files/ja/web/css/overflow-block/index.md | 143 +++++++++------------ files/ja/web/css/overflow-inline/index.md | 142 +++++++++----------- .../ja/web/css/overscroll-behavior-block/index.md | 119 ++++++++--------- .../ja/web/css/overscroll-behavior-inline/index.md | 118 ++++++++--------- 11 files changed, 589 insertions(+), 738 deletions(-) diff --git a/files/ja/web/css/inset-block-end/index.md b/files/ja/web/css/inset-block-end/index.md index d035726730..d0120e54ba 100644 --- a/files/ja/web/css/inset-block-end/index.md +++ b/files/ja/web/css/inset-block-end/index.md @@ -3,22 +3,24 @@ title: inset-block-end slug: Web/CSS/inset-block-end tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス + - recipe:css-property +browser-compat: css.properties.inset-block-end translation_of: Web/CSS/inset-block-end --- -
{{CSSRef}}
+{{CSSRef}} -

inset-block-end は CSS のプロパティで、要素における末尾からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+**`inset-block-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素における末尾からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。 -
/* <length> 値 */
+```css
+/*  値 */
 inset-block-end: 3px;
 inset-block-end: 2.4em;
 
-/* 包含ブロックの幅または高さに対する <percentage> 値 */
+/* 包含ブロックの幅または高さに対する  値 */
 inset-block-end: 10%;
 
 /* キーワード値 */
@@ -27,37 +29,40 @@ inset-block-end: auto;
 /* グローバル値 */
 inset-block-end: inherit;
 inset-block-end: initial;
+inset-block-end: revert;
 inset-block-end: unset;
-
+``` -

構文

+## 構文 -

値

+### 値 -

inset-block-end プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+`inset-block-end` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

ブロック方向の末尾のオフセットの設定

+

ブロック方向の末尾のオフセットの設定

-

HTML

+#### HTML -
<div>
-  <p class="exampleText">テキストの例</p>
-</div>
-
+```html +
+

テキストの例

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -68,39 +73,23 @@ inset-block-end: unset;
   position: relative;
   inset-block-end: 20px;
   background-color: #c8c800;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_block_end_offset", 140, 140)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.inset-block-end")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_block_end_offset", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} +- 対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/inset-block-start/index.md b/files/ja/web/css/inset-block-start/index.md index 08dceab431..9f629fc4c3 100644 --- a/files/ja/web/css/inset-block-start/index.md +++ b/files/ja/web/css/inset-block-start/index.md @@ -3,22 +3,24 @@ title: inset-block-start slug: Web/CSS/inset-block-start tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス + - recipe:css-property +browser-compat: css.properties.inset-block-start translation_of: Web/CSS/inset-block-start --- -
{{CSSRef}}
+{{CSSRef}} -

inset-block-start は CSS のプロパティで、要素における先頭からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+**`inset-block-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素における先頭からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。 -
/* <length> 値 */
+```css
+/*  値 */
 inset-block-start: 3px;
 inset-block-start: 2.4em;
 
-/* 包含ブロックの幅または高さに対する <percentage> 値 */
+/* 包含ブロックの幅または高さに対する  値 */
 inset-block-start: 10%;
 
 /* キーワード値 */
@@ -27,38 +29,40 @@ inset-block-start: auto;
 /* グローバル値 */
 inset-block-start: inherit;
 inset-block-start: initial;
+inset-block-start: revert;
 inset-block-start: unset;
-
+``` +## 構文 -

構文

+### 値 -

値

+`inset-block-start` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。 -

inset-block-start プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+## 公式定義 -

公式定義

+{{cssinfo}} -

{{cssinfo}}

- -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

ブロック方向の先頭のオフセットの設定

+

ブロック方向の先頭のオフセットの設定

-

HTML

+#### HTML -
<div>
-  <p class="exampleText">テキストの例</p>
-</div>
-
+```html +
+

テキストの例

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -69,39 +73,21 @@ inset-block-start: unset;
   position: relative;
   inset-block-start: 20px;
   background-color: #c8c800;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_block_start_offset", 140, 140)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.inset-block-start")}}

- -

関連情報

- - +} +``` + +{{EmbedLiveSample("Setting_block_start_offset", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 内部位置を定義する他のプロパティ: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}} +- 対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/inset-block/index.md b/files/ja/web/css/inset-block/index.md index a9104b99a2..48cdd351c3 100644 --- a/files/ja/web/css/inset-block/index.md +++ b/files/ja/web/css/inset-block/index.md @@ -3,23 +3,25 @@ title: inset-block slug: Web/CSS/inset-block tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-shorthand-property' + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.inset-block translation_of: Web/CSS/inset-block --- -
{{CSSRef}}
+{{CSSRef}} -

inset-block は CSS のプロパティで、要素におけるブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+**`inset-block`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素におけるブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。 -
/* <length> 値 */
+```css
+/*  値 */
 inset-block: 3px 10px;
 inset-block: 2.4em 3em;
 inset-block: 10px; /* 値が先頭と末尾の両方に適用される */
 
-/* 包含ブロックの幅または高さに対する <percentage> 値 */
+/* 包含ブロックの幅または高さに対する  値 */
 inset-block: 10% 5%;
 
 /* キーワード値 */
@@ -28,46 +30,47 @@ inset-block: auto;
 /* グローバル値 */
 inset-block: inherit;
 inset-block: initial;
+inset-block: revert;
 inset-block: unset;
-
+``` -

構成要素のプロパティ

+## 構成要素のプロパティ -

このプロパティは以下の CSS プロパティの一括指定です。

+このプロパティは以下の CSS プロパティの一括指定です。 - +- {{cssxref("inset-block-end")}} +- {{cssxref("inset-block-start")}} -

構文

+## 構文 -

値

+### 値 -

inset-block プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+`inset-block` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

ブロック方向の先頭と末尾のオフセットの設定

+

ブロック方向の先頭と末尾のオフセットの設定

-

HTML

+#### HTML -
<div>
-  <p class="exampleText">テキストの例</p>
-</div>
-
+```html +
+

テキストの例

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -78,40 +81,24 @@ inset-block: unset;
   position: relative;
   inset-block: 20px 50px;
   background-color: #c8c800;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_block_start_and_end_offsets", 140, 140)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.inset-block")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_block_start_and_end_offsets", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} +- 対応する物理的な一括指定: {{cssxref("inset")}} +- 対応するインライン方向の一括指定: {{cssxref("inset-inline")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/inset-inline-end/index.md b/files/ja/web/css/inset-inline-end/index.md index ff8a00d976..77b1b570db 100644 --- a/files/ja/web/css/inset-inline-end/index.md +++ b/files/ja/web/css/inset-inline-end/index.md @@ -3,23 +3,24 @@ title: inset-inline-end slug: Web/CSS/inset-inline-end tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 - NeedsContent - - Reference + - リファレンス - 'recipe:css-property' translation_of: Web/CSS/inset-inline-end --- -
{{CSSRef}}
+{{CSSRef}} -

inset-inline-end は CSS のプロパティで、要素における行末からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+**`inset-inline-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素における行末からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。 -
/* <length> 値 */
+```css
+/*  値 */
 inset-inline-end: 3px;
 inset-inline-end: 2.4em;
 
-/* 包含ブロックの幅または高さに対する <percentage> 値 */
+/* 包含ブロックの幅または高さに対する  値 */
 inset-inline-end: 10%;
 
 /* キーワード値 */
@@ -28,40 +29,42 @@ inset-inline-end: auto;
 /* グローバル値 */
 inset-inline-end: inherit;
 inset-inline-end: initial;
+inset-inline-end: revert;
 inset-inline-end: unset;
-
+``` -

{{cssxref("inset-inline-start")}} と inset-inline-end の一括指定は {{cssxref("inset-inline")}} です。

+{{cssxref("inset-inline-start")}} と `inset-inline-end` の一括指定は {{cssxref("inset-inline")}} です。 +## 構文 -

構文

+### 値 -

値

+`inset-inline-end` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。 -

inset-inline-end プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+## 公式定義 -

公式定義

+{{cssinfo}} -

{{cssinfo}}

- -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

インライン方向の末尾のオフセットの設定

+

インライン方向の末尾のオフセットの設定

-

HTML

+#### HTML -
<div>
-  <p class="exampleText">テキストの例</p>
-</div>
-
+```html +
+

テキストの例

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -72,39 +75,23 @@ inset-inline-end: unset;
   position: relative;
   inset-inline-end: 20px;
   background-color: #c8c800;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_inline_end_offset", 140, 140)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.inset-inline-end")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_inline_end_offset", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}} +- 対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/inset-inline-start/index.md b/files/ja/web/css/inset-inline-start/index.md index 68ba66cceb..74667ad495 100644 --- a/files/ja/web/css/inset-inline-start/index.md +++ b/files/ja/web/css/inset-inline-start/index.md @@ -3,22 +3,24 @@ title: inset-inline-start slug: Web/CSS/inset-inline-start tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス + - recipe:css-property +browser-compat: css.properties.inset-inline-start translation_of: Web/CSS/inset-inline-start --- -
{{CSSRef}}
+{{CSSRef}} -

inset-inline-start は CSS のプロパティで、要素における行頭からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+**`inset-inline-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素における行頭からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。 -
/* <length> 値 */
+```css
+/*  値 */
 inset-inline-start: 3px;
 inset-inline-start: 2.4em;
 
-/* 包含ブロックの幅または高さに対する <percentage> 値 */
+/* 包含ブロックの幅または高さに対する  値 */
 inset-inline-start: 10%;
 
 /* キーワード値 */
@@ -27,39 +29,42 @@ inset-inline-start: auto;
 /* グローバル値 */
 inset-inline-start: inherit;
 inset-inline-start: initial;
+inset-inline-start: revert;
 inset-inline-start: unset;
-
+``` -

inset-inline-start と {{cssxref("inset-inline-end")}} の一括指定は {{cssxref("inset-inline")}} です。

+`inset-inline-start` と {{cssxref("inset-inline-end")}} の一括指定は {{cssxref("inset-inline")}} です。 -

構文

+## 構文 -

値

+### 値 -

inset-inline-start プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+`inset-inline-start` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

インライン方向の先頭のオフセットの設定

+

インライン方向の先頭のオフセットの設定

-

HTML

+#### HTML -
<div>
-  <p class="exampleText">テキストの例</p>
-</div>
-
+```html +
+

テキストの例

+
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -70,39 +75,23 @@ inset-inline-start: unset;
   position: relative;
   inset-inline-start: 20px;
   background-color: #c8c800;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_inline_start_offset", 140, 140)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.inset-inline-start")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_inline_start_offset", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-end")}} +- 対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/inset-inline/index.md b/files/ja/web/css/inset-inline/index.md index 6e99c5c8af..523f7632de 100644 --- a/files/ja/web/css/inset-inline/index.md +++ b/files/ja/web/css/inset-inline/index.md @@ -3,23 +3,25 @@ title: inset-inline slug: Web/CSS/inset-inline tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-shorthand-property' + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.inset-inline translation_of: Web/CSS/inset-inline --- -
{{CSSRef}}
+{{CSSRef}} -

inset-inline は CSS のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。

+**`inset-inline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。 -
/* <length> 値 */
+```css
+/*  値 */
 inset-inline: 3px 10px;
 inset-inline: 2.4em 3em;
 inset-inline: 10px; /* 値が先頭と末尾の両方に適用される */
 
-/* 包含ブロックの幅または高さに対する <percentage> 値 */
+/* 包含ブロックの幅または高さに対する  値 */
 inset-inline: 10% 5%;
 
 /* キーワード値 */
@@ -28,46 +30,49 @@ inset-inline: auto;
 /* グローバル値 */
 inset-inline: inherit;
 inset-inline: initial;
+inset-inline: revert;
 inset-inline: unset;
-
+``` -

構成要素のプロパティ

+## 構成要素のプロパティ -

このプロパティは以下の CSS プロパティの一括指定です。

+このプロパティは以下の CSS プロパティの一括指定です。 - +- {{cssxref("inset-inline-end")}} +- {{cssxref("inset-inline-start")}} -

構文

+## 構文 -

値

+### 値 -

inset-inline プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+`inset-inline` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

インライン方向の先頭と末尾のオフセットの設定

+

インライン方向の先頭と末尾のオフセットの設定

HTML

-
<div>
-  <p class="exampleText">テキストの例</p>
-</div>
-
+#### HTML -

CSS

+```html +
+

テキストの例

+
+``` -
div {
+#### CSS
+
+```css
+div {
   background-color: yellow;
   width: 120px;
   height: 120px;
@@ -78,40 +83,24 @@ inset-inline: unset;
   position: relative;
   inset-inline: 20px 50px;
   background-color: #c8c800;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_inline_start_and_end_offsets", 140, 140)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.inset-inline")}}

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_inline_start_and_end_offsets", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} +- 対応する物理的な一括指定: {{cssxref("inset")}} +- 対応するブロック方向の一括指定: {{cssxref("inset-block")}} +- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/ja/web/css/inset/index.md b/files/ja/web/css/inset/index.md index c6ef5eeaac..f01a5fca6c 100644 --- a/files/ja/web/css/inset/index.md +++ b/files/ja/web/css/inset/index.md @@ -3,27 +3,29 @@ title: inset slug: Web/CSS/inset tags: - CSS - - CSS Logical Property - - CSS Property - - Experimental + - CSS 論理的プロパティ + - CSS プロパティ + - 実験的 - Property - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.inset translation_of: Web/CSS/inset --- -
{{CSSRef}}
+{{CSSRef}} -

inset は CSS のプロパティで、 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} に対応する一括指定です。これは {{cssxref("margin")}} の一括指定における複数値の場合と同じ構文です。

+**`inset`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} に対応する一括指定です。これは {{cssxref("margin")}} の一括指定における複数値の場合と同じ構文です。 -

CSS 論理的プロパティの仕様書で定義されているものですが、論理的なオフセットを定義するものではありません。これは物理的なオフセットであり、要素の書字方向やテキストの向きには関係がありません。

+*CSS 論理的プロパティ*の仕様書で定義されているものですが、*論理的*なオフセットを定義するものではありません。これは*物理的*なオフセットであり、要素の書字方向やテキストの向きには関係がありません。 -
/* <length> 値 */
+```css
+/*  値 */
 inset: 10px; /* すべての辺に適用される値 */
 inset: 4px 8px; /* 上/下 左/右 */
 inset: 5px 15px 10px; /* 上 左/右 下 */
 inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */
 
-/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
+/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する  */
 inset: 10% 5% 5% 5%;
 
 /* キーワード値 */
@@ -32,38 +34,40 @@ inset: auto;
 /* グローバル値 */
 inset: inherit;
 inset: initial;
+inset: revert;
 inset: unset;
+```
 
-
+## 構文 -

構文

+### 値 -

値

+`inset` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。 -

inset プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。

+## 公式定義 -

公式定義

+{{cssinfo}} -

{{cssinfo}}

- -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

要素のオフセットの設定

+

要素のオフセットの設定

-

HTML

+#### HTML -
<div>
-  <span class="exampleText">テキストの例</span>
-</div>
-
+```html +
+ テキストの例 +
+``` -

CSS

+#### CSS -
div {
+```css
+div {
   background-color: yellow;
   width: 150px;
   height: 120px;
@@ -75,39 +79,23 @@ inset: unset;
   position: absolute;
   inset: 20px 40px 30px 10px;
   background-color: #c8c800;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_offsets_for_an_element", 140, 140)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}{{Spec2("CSS Logical Properties")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_offsets_for_an_element", 140, 140)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 個別指定のボックスのオフセットプロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} +- 対応する論理プロパティの一括指定: {{cssxref("inset-block")}} および {{cssxref("inset-inline")}} +- {{cssxref("margin")}} 一括指定の複数値の構文 diff --git a/files/ja/web/css/overflow-block/index.md b/files/ja/web/css/overflow-block/index.md index 8d96ac1593..b7ea4bd612 100644 --- a/files/ja/web/css/overflow-block/index.md +++ b/files/ja/web/css/overflow-block/index.md @@ -4,22 +4,22 @@ slug: Web/CSS/overflow-block tags: - CSS - CSS ボックスモデル - - CSS Property - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.overflow-block translation_of: Web/CSS/overflow-block --- -

{{CSSRef}}

+{{CSSRef}} -

overflow-block は CSS プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。

+**`overflow-block`** は [CSS](/ja/docs/Web/CSS) プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。 -
-

overflow-block プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。

-
+> **Note:** `overflow-block` プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 overflow-block: visible;
 overflow-block: hidden;
 overflow-block: scroll;
@@ -28,67 +28,67 @@ overflow-block: auto;
 /* グローバル値 */
 overflow-block: inherit;
 overflow-block: initial;
+overflow-block: revert;
 overflow-block: unset;
-
+``` -

overflow-block プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

+`overflow-block` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。 -

値

+### 値 -
-
visible
-
内容は切り取られず、パディングボックスのブロックの先頭とブロックの末尾の辺よりも外側に表示される可能性があります。
-
hidden
-
ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
-
scroll
-
ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
-
auto
-
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
-
+- `visible` + - : 内容は切り取られず、パディングボックスのブロックの先頭とブロックの末尾の辺よりも外側に表示される可能性があります。 +- `hidden` + - : ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。 +- `scroll` + - : ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。 +- `auto` + - : ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。 -

公式定義

+## 公式定義 -

{{CSSInfo}}

+{{CSSInfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+

例

-

HTML

+### HTML -
<ul>
-  <li><code>overflow-block:hidden</code> — ボックスの外側のテキストを隠す
-  <div id="div1">
+```html
+
+ + + +``` -

CSS

+### CSS -
#div1,
+```css
+#div1,
 #div2,
 #div3,
 #div4 {
@@ -101,43 +101,22 @@ overflow-block: unset;
 #div2 { overflow-block: scroll; margin-bottom: 120px;}
 #div3 { overflow-block: visible; margin-bottom: 120px;}
 #div4 { overflow-block: auto; margin-bottom: 120px;}
-
+``` -

結果

+### 結果 -
-

{{EmbedLiveSample("Examples", "100%", "780")}}

-
+{{EmbedLiveSample("Examples", "100%", "780")}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}{{ Spec2('CSS3 Overflow') }}
+{{Specifications}} -
{{cssinfo}}
+## ブラウザーの互換性 -

ブラウザーの互換性

+{{Compat}} -

{{Compat("css.properties.overflow-block")}}

+## 関連情報 -

関連情報

- - +- 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}} +- [CSS 論理プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties) +- [書字方向](/ja/docs/Web/CSS/CSS_Writing_Modes) diff --git a/files/ja/web/css/overflow-inline/index.md b/files/ja/web/css/overflow-inline/index.md index 1fd41684cc..c98f87432e 100644 --- a/files/ja/web/css/overflow-inline/index.md +++ b/files/ja/web/css/overflow-inline/index.md @@ -4,22 +4,22 @@ slug: Web/CSS/overflow-inline tags: - CSS - CSS ボックスモデル - - CSS Property - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.overflow-inline translation_of: Web/CSS/overflow-inline --- -
{{CSSRef}}
+{{CSSRef}} -

overflow-inline は CSS のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。

+**`overflow-inline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。 -
-

overflow-inline プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。

-
+> **Note:** `overflow-inline` プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 overflow-inline: visible;
 overflow-inline: hidden;
 overflow-inline: scroll;
@@ -28,68 +28,69 @@ overflow-inline: auto;
 /* グローバル値 */
 overflow-inline: inherit;
 overflow-inline: initial;
+overflow-inline: revert;
 overflow-inline: unset;
-
+``` -

overflow-inline プロパティは、以下の値の一覧のうち一つのキーワードで指定します。

+`overflow-inline` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。 -

値

+### 値 -
-
visible
-
内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。
-
hidden
-
インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
-
scroll
-
インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
-
auto
-
ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は visible と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
-
+- `visible` + - : 内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。 +- `hidden` + - : インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。 +- `scroll` + - : インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。 +- `auto` + - : ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

インライン方向のはみ出し動作の設定

+

インライン方向のはみ出し動作の設定

-

HTML

+#### HTML -
<ul>
-  <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す
-    <div id="div1">
+```html
+
+ + + +``` -

CSS

+#### CSS -
#div1, #div2, #div3, #div4 {
+```css
+#div1, #div2, #div3, #div4 {
   border: 1px solid black;
   width:  250px;
   margin-bottom: 12px;
@@ -99,41 +100,22 @@ overflow-inline: unset;
 #div2 { overflow-inline: scroll;}
 #div3 { overflow-inline: visible;}
 #div4 { overflow-inline: auto;}
-
+``` -

結果

+#### 結果 -
-

{{EmbedLiveSample("Setting_inline_overflow_behavior", "100%", "270")}}

-
+{{EmbedLiveSample("Setting_inline_overflow_behavior", "100%", "270")}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}{{Spec2('CSS3 Overflow')}}
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.overflow-inline")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-block")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}} +- [CSS 論理プロパティ](/ja/docs/Web/CSS/CSS_Logical_Properties) +- [書字方向](/ja/docs/Web/CSS/CSS_Writing_Modes) diff --git a/files/ja/web/css/overscroll-behavior-block/index.md b/files/ja/web/css/overscroll-behavior-block/index.md index 630f084a46..bd8ab8bd81 100644 --- a/files/ja/web/css/overscroll-behavior-block/index.md +++ b/files/ja/web/css/overscroll-behavior-block/index.md @@ -4,21 +4,22 @@ slug: Web/CSS/overscroll-behavior-block tags: - CSS - CSS ボックスモデル - - CSS Logical Properties - - CSS Property - - NeedsExample - - Reference + - CSS 論理的プロパティ + - CSS プロパティ + - リファレンス - overscroll-behavior-block - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.overscroll-behavior-block translation_of: Web/CSS/overscroll-behavior-block --- -
{{CSSRef}}
+{{CSSRef}} -

overscroll-behavior-block は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。

+**`overscroll-behavior-block`** は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。 -

全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。

+全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 overscroll-behavior-block: auto; /* 既定値 */
 overscroll-behavior-block: contain;
 overscroll-behavior-block: none;
@@ -26,60 +27,62 @@ overscroll-behavior-block: none;
 /* グローバル値 */
 overscroll-behavior-block: inherit;
 overscroll-behavior-block: initial;
+overscroll-behavior-block: revert;
 overscroll-behavior-block: unset;
-
+``` -

構文

+## 構文 -

overscroll-behavior-block プロパティは、次の値の一覧のうち一つのキーワードで指定します。

+`overscroll-behavior-block` プロパティは、次の値の一覧のうち一つのキーワードで指定します。 -

値

+### 値 -
-
auto
-
スクロールの末端における既定の振る舞いが通常通りに発生します。
-
contain
-
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。
-
none
-
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。
-
+- `auto` + - : スクロールの末端における既定の振る舞いが通常通りに発生します。 +- `contain` + - : この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。 +- `none` + - : 隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

ブロック方向のオーバースクロールの抑止

+

ブロック方向のオーバースクロールの抑止

-

このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と height) が小さく、ビューポート内にきちんと収まりますが、内容は広い height を持つため、垂直にスクロールします。

+このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と `height`) が小さく、ビューポート内にきちんと収まりますが、内容は広い `height` を持つため、垂直にスクロールします。 -

既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに overscroll-behavior-block: contain を設定しました。

+既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに `overscroll-behavior-block: contain` を設定しました。 -

HTML

+#### HTML -
<main>
-  <div>
-    <div>
-      <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
-    </div>
-  </div>
-</main>
+```html +
+ 
+   
+     

overscroll-behavior-block has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.

+   
+ 
+
+``` -

CSS

+#### CSS -
main {
+```css
+main {
   height: 3000px;
   width: 500px;
   background-color: white;
   background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
 }
 
-main > div {
+main > div {
   height: 300px;
   width: 400px;
   overflow: auto;
@@ -89,7 +92,7 @@ main > div {
   overscroll-behavior-block: contain;
 }
 
-div > div {
+div > div {
   height: 1500px;
   width: 100%;
   background-color: yellow;
@@ -104,37 +107,21 @@ p {
   position: relative;
   top: 10px;
   left: 10px;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}

+{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}{{Spec2('CSS Overscroll Behavior')}}
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.overscroll-behavior-block")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [スクロールを制御する: 引いて更新や末端の効果のカスタマイズ](https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo) diff --git a/files/ja/web/css/overscroll-behavior-inline/index.md b/files/ja/web/css/overscroll-behavior-inline/index.md index 30ee73ab8f..2f63ef315a 100644 --- a/files/ja/web/css/overscroll-behavior-inline/index.md +++ b/files/ja/web/css/overscroll-behavior-inline/index.md @@ -4,21 +4,23 @@ slug: Web/CSS/overscroll-behavior-inline tags: - CSS - CSS ボックスモデル - - CSS Logical Properties - - CSS Property + - CSS 論理的プロパティ + - CSS プロパティ - NeedsExample - - Reference + - リファレンス - overscroll-behavior-inline - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.overscroll-behavior-inline translation_of: Web/CSS/overscroll-behavior-inline --- -
{{CSSRef}}
+{{CSSRef}} -

overscroll-behavior-inline は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。

+**`overscroll-behavior-inline`** は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。 -

全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。

+全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 overscroll-behavior-inline: auto; /* default */
 overscroll-behavior-inline: contain;
 overscroll-behavior-inline: none;
@@ -26,60 +28,62 @@ overscroll-behavior-inline: none;
 /* グローバル値 */
 overscroll-behavior-inline: inherit;
 overscroll-behavior-inline: initial;
+overscroll-behavior-inline: revert;
 overscroll-behavior-inline: unset;
-
+``` -

構文

+## 構文 -

overscroll-behavior-inline プロパティは、次の値の一覧のうち一つのキーワードで指定します。

+`overscroll-behavior-inline` プロパティは、次の値の一覧のうち一つのキーワードで指定します。 -

値

+### 値 -
-
auto
-
スクロールの末端における既定の振る舞いが通常通りに発生します。
-
contain
-
この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。
-
none
-
隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。
-
+- `auto` + - : スクロールの末端における既定の振る舞いが通常通りに発生します。 +- `contain` + - : この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。 +- `none` + - : 隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

インライン方向のオーバースクロールの抑止

+

インライン方向のオーバースクロールの抑止

-

このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。

+このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。 -

既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに overscroll-behavior-inline: contain を設定しました。

+既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに `overscroll-behavior-inline: contain` を設定しました。 -

HTML

+#### HTML -
<main>
-  <div>
-    <div>
-      <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p>
-    </div>
-  </div>
-</main>
+```html +
+ 
+   
+     

overscroll-behavior-inline has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.

+   
+ 
+
+``` -

CSS

+#### CSS -
main {
+```css
+main {
   height: 400px;
   width: 3000px;
   background-color: white;
   background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px);
 }
 
-main > div {
+main > div {
   height: 300px;
   width: 400px;
   overflow: auto;
@@ -89,7 +93,7 @@ main > div {
   overscroll-behavior-inline: contain;
 }
 
-div > div {
+div > div {
   height: 100%;
   width: 1500px;
   background-color: yellow;
@@ -104,37 +108,21 @@ p {
   position: relative;
   top: 10px;
   left: 10px;
-}
+} +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}

+{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}{{Spec2('CSS Overscroll Behavior')}}
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("css.properties.overscroll-behavior-x")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [スクロールを制御する: 引いて更新や末端の効果のカスタマイズ](https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo) -- cgit v1.2.3-54-g00ecf