From 75c9efb03dd63fb59adde624552b6d4d04e178d7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 17 Nov 2021 01:34:23 +0900 Subject: CSS 論理的プロパティのその他プロパティの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/_redirects.txt | 4 + files/ja/web/css/inset-block-end/index.html | 106 --------------- files/ja/web/css/inset-block-end/index.md | 106 +++++++++++++++ files/ja/web/css/inset-block-start/index.html | 107 --------------- files/ja/web/css/inset-block-start/index.md | 107 +++++++++++++++ files/ja/web/css/inset-block/index.html | 117 ----------------- files/ja/web/css/inset-block/index.md | 117 +++++++++++++++++ files/ja/web/css/inset-inline-end/index.html | 110 ---------------- files/ja/web/css/inset-inline-end/index.md | 110 ++++++++++++++++ files/ja/web/css/inset-inline-start/index.html | 108 ---------------- files/ja/web/css/inset-inline-start/index.md | 108 ++++++++++++++++ files/ja/web/css/inset-inline/index.html | 117 ----------------- files/ja/web/css/inset-inline/index.md | 117 +++++++++++++++++ files/ja/web/css/inset/index.html | 113 ---------------- files/ja/web/css/inset/index.md | 113 ++++++++++++++++ files/ja/web/css/overflow-block/index.html | 143 --------------------- files/ja/web/css/overflow-block/index.md | 143 +++++++++++++++++++++ files/ja/web/css/overflow-inline/index.html | 139 -------------------- files/ja/web/css/overflow-inline/index.md | 139 ++++++++++++++++++++ .../web/css/overscroll-behavior-block/index.html | 140 -------------------- .../ja/web/css/overscroll-behavior-block/index.md | 140 ++++++++++++++++++++ .../web/css/overscroll-behavior-inline/index.html | 140 -------------------- .../ja/web/css/overscroll-behavior-inline/index.md | 140 ++++++++++++++++++++ 23 files changed, 1344 insertions(+), 1340 deletions(-) delete mode 100644 files/ja/web/css/inset-block-end/index.html create mode 100644 files/ja/web/css/inset-block-end/index.md delete mode 100644 files/ja/web/css/inset-block-start/index.html create mode 100644 files/ja/web/css/inset-block-start/index.md delete mode 100644 files/ja/web/css/inset-block/index.html create mode 100644 files/ja/web/css/inset-block/index.md delete mode 100644 files/ja/web/css/inset-inline-end/index.html create mode 100644 files/ja/web/css/inset-inline-end/index.md delete mode 100644 files/ja/web/css/inset-inline-start/index.html create mode 100644 files/ja/web/css/inset-inline-start/index.md delete mode 100644 files/ja/web/css/inset-inline/index.html create mode 100644 files/ja/web/css/inset-inline/index.md delete mode 100644 files/ja/web/css/inset/index.html create mode 100644 files/ja/web/css/inset/index.md delete mode 100644 files/ja/web/css/overflow-block/index.html create mode 100644 files/ja/web/css/overflow-block/index.md delete mode 100644 files/ja/web/css/overflow-inline/index.html create mode 100644 files/ja/web/css/overflow-inline/index.md delete mode 100644 files/ja/web/css/overscroll-behavior-block/index.html create mode 100644 files/ja/web/css/overscroll-behavior-block/index.md delete mode 100644 files/ja/web/css/overscroll-behavior-inline/index.html create mode 100644 files/ja/web/css/overscroll-behavior-inline/index.md (limited to 'files/ja') diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 22601ab223..7cb0209911 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -3753,6 +3753,10 @@ /ja/docs/Web/CSS/min /ja/docs/Web/CSS/min() /ja/docs/Web/CSS/minmax /ja/docs/Web/CSS/minmax() /ja/docs/Web/CSS/normal /ja/docs/Web/CSS/font-variant +/ja/docs/Web/CSS/offset-block-end /ja/docs/Web/CSS/inset-block-end +/ja/docs/Web/CSS/offset-block-start /ja/docs/Web/CSS/inset-block-start +/ja/docs/Web/CSS/offset-inline-end /ja/docs/Web/CSS/inset-inline-end +/ja/docs/Web/CSS/offset-inline-start /ja/docs/Web/CSS/inset-inline-start /ja/docs/Web/CSS/paint /ja/docs/Web/CSS/image/paint() /ja/docs/Web/CSS/paint() /ja/docs/Web/CSS/image/paint() /ja/docs/Web/CSS/radial-gradient /ja/docs/Web/CSS/gradient/radial-gradient() diff --git a/files/ja/web/css/inset-block-end/index.html b/files/ja/web/css/inset-block-end/index.html deleted file mode 100644 index d035726730..0000000000 --- a/files/ja/web/css/inset-block-end/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: inset-block-end -slug: Web/CSS/inset-block-end -tags: - - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/inset-block-end ---- -
{{CSSRef}}
- -

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

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

構文

- -

値

- -

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

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

HTML

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

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/inset-block-end/index.md b/files/ja/web/css/inset-block-end/index.md new file mode 100644 index 0000000000..d035726730 --- /dev/null +++ b/files/ja/web/css/inset-block-end/index.md @@ -0,0 +1,106 @@ +--- +title: inset-block-end +slug: Web/CSS/inset-block-end +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset-block-end +--- +
{{CSSRef}}
+ +

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

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

構文

+ +

値

+ +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

HTML

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

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/inset-block-start/index.html b/files/ja/web/css/inset-block-start/index.html deleted file mode 100644 index 08dceab431..0000000000 --- a/files/ja/web/css/inset-block-start/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: inset-block-start -slug: Web/CSS/inset-block-start -tags: - - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/inset-block-start ---- -
{{CSSRef}}
- -

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

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

構文

- -

値

- -

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

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

HTML

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

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/inset-block-start/index.md b/files/ja/web/css/inset-block-start/index.md new file mode 100644 index 0000000000..08dceab431 --- /dev/null +++ b/files/ja/web/css/inset-block-start/index.md @@ -0,0 +1,107 @@ +--- +title: inset-block-start +slug: Web/CSS/inset-block-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset-block-start +--- +
{{CSSRef}}
+ +

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

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

構文

+ +

値

+ +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

HTML

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

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/inset-block/index.html b/files/ja/web/css/inset-block/index.html deleted file mode 100644 index a9104b99a2..0000000000 --- a/files/ja/web/css/inset-block/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: inset-block -slug: Web/CSS/inset-block -tags: - - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/inset-block ---- -
{{CSSRef}}
- -

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

- -
/* <length> 値 */
-inset-block: 3px 10px;
-inset-block: 2.4em 3em;
-inset-block: 10px; /* 値が先頭と末尾の両方に適用される */
-
-/* 包含ブロックの幅または高さに対する <percentage> 値 */
-inset-block: 10% 5%;
-
-/* キーワード値 */
-inset-block: auto;
-
-/* グローバル値 */
-inset-block: inherit;
-inset-block: initial;
-inset-block: unset;
-
- -

構成要素のプロパティ

- -

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

- - - -

構文

- -

値

- -

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

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

HTML

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

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/inset-block/index.md b/files/ja/web/css/inset-block/index.md new file mode 100644 index 0000000000..a9104b99a2 --- /dev/null +++ b/files/ja/web/css/inset-block/index.md @@ -0,0 +1,117 @@ +--- +title: inset-block +slug: Web/CSS/inset-block +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/inset-block +--- +
{{CSSRef}}
+ +

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

+ +
/* <length> 値 */
+inset-block: 3px 10px;
+inset-block: 2.4em 3em;
+inset-block: 10px; /* 値が先頭と末尾の両方に適用される */
+
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
+inset-block: 10% 5%;
+
+/* キーワード値 */
+inset-block: auto;
+
+/* グローバル値 */
+inset-block: inherit;
+inset-block: initial;
+inset-block: unset;
+
+ +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +

値

+ +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

HTML

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

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/inset-inline-end/index.html b/files/ja/web/css/inset-inline-end/index.html deleted file mode 100644 index ff8a00d976..0000000000 --- a/files/ja/web/css/inset-inline-end/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: inset-inline-end -slug: Web/CSS/inset-inline-end -tags: - - CSS - - CSS Logical Property - - CSS Property - - Experimental - - NeedsContent - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/inset-inline-end ---- -
{{CSSRef}}
- -

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

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

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

- - -

構文

- -

値

- -

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

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

HTML

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

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-rl;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/inset-inline-end/index.md b/files/ja/web/css/inset-inline-end/index.md new file mode 100644 index 0000000000..ff8a00d976 --- /dev/null +++ b/files/ja/web/css/inset-inline-end/index.md @@ -0,0 +1,110 @@ +--- +title: inset-inline-end +slug: Web/CSS/inset-inline-end +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - NeedsContent + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset-inline-end +--- +
{{CSSRef}}
+ +

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

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

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

+ + +

構文

+ +

値

+ +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

HTML

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

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-rl;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/inset-inline-start/index.html b/files/ja/web/css/inset-inline-start/index.html deleted file mode 100644 index 68ba66cceb..0000000000 --- a/files/ja/web/css/inset-inline-start/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: inset-inline-start -slug: Web/CSS/inset-inline-start -tags: - - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/inset-inline-start ---- -
{{CSSRef}}
- -

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

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

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

- -

構文

- -

値

- -

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

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

HTML

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

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/inset-inline-start/index.md b/files/ja/web/css/inset-inline-start/index.md new file mode 100644 index 0000000000..68ba66cceb --- /dev/null +++ b/files/ja/web/css/inset-inline-start/index.md @@ -0,0 +1,108 @@ +--- +title: inset-inline-start +slug: Web/CSS/inset-inline-start +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/inset-inline-start +--- +
{{CSSRef}}
+ +

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

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

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

+ +

構文

+ +

値

+ +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

HTML

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

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/inset-inline/index.html b/files/ja/web/css/inset-inline/index.html deleted file mode 100644 index 6e99c5c8af..0000000000 --- a/files/ja/web/css/inset-inline/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: inset-inline -slug: Web/CSS/inset-inline -tags: - - CSS - - CSS Logical Property - - CSS Property - - Experimental - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/inset-inline ---- -
{{CSSRef}}
- -

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

- -
/* <length> 値 */
-inset-inline: 3px 10px;
-inset-inline: 2.4em 3em;
-inset-inline: 10px; /* 値が先頭と末尾の両方に適用される */
-
-/* 包含ブロックの幅または高さに対する <percentage> 値 */
-inset-inline: 10% 5%;
-
-/* キーワード値 */
-inset-inline: auto;
-
-/* グローバル値 */
-inset-inline: inherit;
-inset-inline: initial;
-inset-inline: unset;
-
- -

構成要素のプロパティ

- -

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

- - - -

構文

- -

値

- -

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

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

HTML

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

CSS

- -
div {
-  background-color: yellow;
-  width: 120px;
-  height: 120px;
-}
-
-.exampleText {
-  writing-mode: vertical-lr;
-  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")}}

- -

関連情報

- - diff --git a/files/ja/web/css/inset-inline/index.md b/files/ja/web/css/inset-inline/index.md new file mode 100644 index 0000000000..6e99c5c8af --- /dev/null +++ b/files/ja/web/css/inset-inline/index.md @@ -0,0 +1,117 @@ +--- +title: inset-inline +slug: Web/CSS/inset-inline +tags: + - CSS + - CSS Logical Property + - CSS Property + - Experimental + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/inset-inline +--- +
{{CSSRef}}
+ +

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

+ +
/* <length> 値 */
+inset-inline: 3px 10px;
+inset-inline: 2.4em 3em;
+inset-inline: 10px; /* 値が先頭と末尾の両方に適用される */
+
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
+inset-inline: 10% 5%;
+
+/* キーワード値 */
+inset-inline: auto;
+
+/* グローバル値 */
+inset-inline: inherit;
+inset-inline: initial;
+inset-inline: unset;
+
+ +

構成要素のプロパティ

+ +

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

+ + + +

構文

+ +

値

+ +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

HTML

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

CSS

+ +
div {
+  background-color: yellow;
+  width: 120px;
+  height: 120px;
+}
+
+.exampleText {
+  writing-mode: vertical-lr;
+  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")}}

+ +

関連情報

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

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

- -

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

- -
/* <length> 値 */
-inset: 10px; /* すべての辺に適用される値 */
-inset: 4px 8px; /* 上/下 左/右 */
-inset: 5px 15px 10px; /* 上 左/右 下 */
-inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */
-
-/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
-inset: 10% 5% 5% 5%;
-
-/* キーワード値 */
-inset: auto;
-
-/* グローバル値 */
-inset: inherit;
-inset: initial;
-inset: unset;
-
-
- -

構文

- -

値

- -

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

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

要素のオフセットの設定

- -

HTML

- -
<div>
-  <span class="exampleText">テキストの例</span>
-</div>
-
- -

CSS

- -
div {
-  background-color: yellow;
-  width: 150px;
-  height: 120px;
-  position: relative;
-}
-
-.exampleText {
-  writing-mode: sideways-rl;
-  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")}}

- -

関連情報

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

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

+ +

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

+ +
/* <length> 値 */
+inset: 10px; /* すべての辺に適用される値 */
+inset: 4px 8px; /* 上/下 左/右 */
+inset: 5px 15px 10px; /* 上 左/右 下 */
+inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */
+
+/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
+inset: 10% 5% 5% 5%;
+
+/* キーワード値 */
+inset: auto;
+
+/* グローバル値 */
+inset: inherit;
+inset: initial;
+inset: unset;
+
+
+ +

構文

+ +

値

+ +

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

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

要素のオフセットの設定

+ +

HTML

+ +
<div>
+  <span class="exampleText">テキストの例</span>
+</div>
+
+ +

CSS

+ +
div {
+  background-color: yellow;
+  width: 150px;
+  height: 120px;
+  position: relative;
+}
+
+.exampleText {
+  writing-mode: sideways-rl;
+  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")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/overflow-block/index.html b/files/ja/web/css/overflow-block/index.html deleted file mode 100644 index 024708db5a..0000000000 --- a/files/ja/web/css/overflow-block/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: overflow-block -slug: Web/CSS/overflow-block -tags: - - CSS - - CSS Box Model - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/overflow-block ---- -

{{CSSRef}}

- -

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

- -
-

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

-
- -

構文

- -
/* キーワード値 */
-overflow-block: visible;
-overflow-block: hidden;
-overflow-block: scroll;
-overflow-block: auto;
-
-/* グローバル値 */
-overflow-block: inherit;
-overflow-block: initial;
-overflow-block: unset;
-
- -

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

- -

値

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

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<ul>
-  <li><code>overflow-block:hidden</code> — ボックスの外側のテキストを隠す
-  <div id="div1">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-
-  <li><code>overflow-block:scroll</code> — 常にスクロールバーを表示
-  <div id="div2">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-
-  <li><code>overflow-block:visible</code> — 必要に応じてテキストをボックスの外に表示
-  <div id="div3">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-
-  <li><code>overflow-block:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
-  <div id="div4">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </div>
-  </li>
-</ul>
-
-
- -

CSS

- -
#div1,
-#div2,
-#div3,
-#div4 {
-  border: 1px solid black;
-  width:  250px;
-  height: 100px;
-}
-
-#div1 { overflow-block: hidden; margin-bottom: 120px;}
-#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")}}

-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/overflow-block/index.md b/files/ja/web/css/overflow-block/index.md new file mode 100644 index 0000000000..8d96ac1593 --- /dev/null +++ b/files/ja/web/css/overflow-block/index.md @@ -0,0 +1,143 @@ +--- +title: overflow-block +slug: Web/CSS/overflow-block +tags: + - CSS + - CSS ボックスモデル + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/overflow-block +--- +

{{CSSRef}}

+ +

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

+ +
+

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

+
+ +

構文

+ +
/* キーワード値 */
+overflow-block: visible;
+overflow-block: hidden;
+overflow-block: scroll;
+overflow-block: auto;
+
+/* グローバル値 */
+overflow-block: inherit;
+overflow-block: initial;
+overflow-block: unset;
+
+ +

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

+ +

値

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

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<ul>
+  <li><code>overflow-block:hidden</code> — ボックスの外側のテキストを隠す
+  <div id="div1">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:scroll</code> — 常にスクロールバーを表示
+  <div id="div2">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:visible</code> — 必要に応じてテキストをボックスの外に表示
+  <div id="div3">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+
+  <li><code>overflow-block:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+  <div id="div4">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </div>
+  </li>
+</ul>
+
+
+ +

CSS

+ +
#div1,
+#div2,
+#div3,
+#div4 {
+  border: 1px solid black;
+  width:  250px;
+  height: 100px;
+}
+
+#div1 { overflow-block: hidden; margin-bottom: 120px;}
+#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")}}

+
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/overflow-inline/index.html b/files/ja/web/css/overflow-inline/index.html deleted file mode 100644 index 2f171e18b5..0000000000 --- a/files/ja/web/css/overflow-inline/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: overflow-inline -slug: Web/CSS/overflow-inline -tags: - - CSS - - CSS Box Model - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/overflow-inline ---- -
{{CSSRef}}
- -

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

- -
-

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

-
- -

構文

- -
/* キーワード値 */
-overflow-inline: visible;
-overflow-inline: hidden;
-overflow-inline: scroll;
-overflow-inline: auto;
-
-/* グローバル値 */
-overflow-inline: inherit;
-overflow-inline: initial;
-overflow-inline: unset;
-
- -

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

- -

値

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

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

HTML

- -
<ul>
-  <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す
-    <div id="div1">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-inline:scroll</code> — 常にスクロールバーを表示
-    <div id="div2">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-inline:visible</code> — 必要に応じてテキストをボックスの外に表示
-    <div id="div3">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-
-  <li><code>overflow-inline:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
-    <div id="div4">
-      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
-    </div>
-  </li>
-</ul>
-
- -

CSS

- -
#div1, #div2, #div3, #div4 {
-  border: 1px solid black;
-  width:  250px;
-  margin-bottom: 12px;
-}
-
-#div1 { overflow-inline: hidden;}
-#div2 { overflow-inline: scroll;}
-#div3 { overflow-inline: visible;}
-#div4 { overflow-inline: auto;}
-
- -

結果

- -
-

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

-
- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/overflow-inline/index.md b/files/ja/web/css/overflow-inline/index.md new file mode 100644 index 0000000000..1fd41684cc --- /dev/null +++ b/files/ja/web/css/overflow-inline/index.md @@ -0,0 +1,139 @@ +--- +title: overflow-inline +slug: Web/CSS/overflow-inline +tags: + - CSS + - CSS ボックスモデル + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/overflow-inline +--- +
{{CSSRef}}
+ +

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

+ +
+

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

+
+ +

構文

+ +
/* キーワード値 */
+overflow-inline: visible;
+overflow-inline: hidden;
+overflow-inline: scroll;
+overflow-inline: auto;
+
+/* グローバル値 */
+overflow-inline: inherit;
+overflow-inline: initial;
+overflow-inline: unset;
+
+ +

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

+ +

値

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

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

HTML

+ +
<ul>
+  <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す
+    <div id="div1">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline:scroll</code> — 常にスクロールバーを表示
+    <div id="div2">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline:visible</code> — 必要に応じてテキストをボックスの外に表示
+    <div id="div3">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+
+  <li><code>overflow-inline:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+    <div id="div4">
+      ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
+    </div>
+  </li>
+</ul>
+
+ +

CSS

+ +
#div1, #div2, #div3, #div4 {
+  border: 1px solid black;
+  width:  250px;
+  margin-bottom: 12px;
+}
+
+#div1 { overflow-inline: hidden;}
+#div2 { overflow-inline: scroll;}
+#div3 { overflow-inline: visible;}
+#div4 { overflow-inline: auto;}
+
+ +

結果

+ +
+

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

+
+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/overscroll-behavior-block/index.html b/files/ja/web/css/overscroll-behavior-block/index.html deleted file mode 100644 index d7ac6b000b..0000000000 --- a/files/ja/web/css/overscroll-behavior-block/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: overscroll-behavior-block -slug: Web/CSS/overscroll-behavior-block -tags: - - CSS - - CSS Box Model - - CSS Logical Properties - - CSS Property - - NeedsExample - - Reference - - overscroll-behavior-block - - 'recipe:css-property' -translation_of: Web/CSS/overscroll-behavior-block ---- -
{{CSSRef}}
- -

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

- -

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

- -
/* キーワード値 */
-overscroll-behavior-block: auto; /* 既定値 */
-overscroll-behavior-block: contain;
-overscroll-behavior-block: none;
-
-/* グローバル値 */
-overscroll-behavior-block: inherit;
-overscroll-behavior-block: initial;
-overscroll-behavior-block: unset;
-
- -

構文

- -

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

- -

値

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

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

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

- -

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

- -

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>
- -

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 {
-  height: 300px;
-  width: 400px;
-  overflow: auto;
-  position: relative;
-  top: 50px;
-  left: 50px;
-  overscroll-behavior-block: contain;
-}
-
-div > div {
-  height: 1500px;
-  width: 100%;
-  background-color: yellow;
-  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);
-}
-
-p {
-  padding: 10px;
-  background-color: rgba(255,0,0,0.5);
-  margin: 0;
-  width: 340px;
-  position: relative;
-  top: 10px;
-  left: 10px;
-}
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/overscroll-behavior-block/index.md b/files/ja/web/css/overscroll-behavior-block/index.md new file mode 100644 index 0000000000..630f084a46 --- /dev/null +++ b/files/ja/web/css/overscroll-behavior-block/index.md @@ -0,0 +1,140 @@ +--- +title: overscroll-behavior-block +slug: Web/CSS/overscroll-behavior-block +tags: + - CSS + - CSS ボックスモデル + - CSS Logical Properties + - CSS Property + - NeedsExample + - Reference + - overscroll-behavior-block + - 'recipe:css-property' +translation_of: Web/CSS/overscroll-behavior-block +--- +
{{CSSRef}}
+ +

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

+ +

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

+ +
/* キーワード値 */
+overscroll-behavior-block: auto; /* 既定値 */
+overscroll-behavior-block: contain;
+overscroll-behavior-block: none;
+
+/* グローバル値 */
+overscroll-behavior-block: inherit;
+overscroll-behavior-block: initial;
+overscroll-behavior-block: unset;
+
+ +

構文

+ +

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

+ +

値

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

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

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

+ +

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

+ +

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>
+ +

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 {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-block: contain;
+}
+
+div > div {
+  height: 1500px;
+  width: 100%;
+  background-color: yellow;
+  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);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 340px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/overscroll-behavior-inline/index.html b/files/ja/web/css/overscroll-behavior-inline/index.html deleted file mode 100644 index 278f5b3da8..0000000000 --- a/files/ja/web/css/overscroll-behavior-inline/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: overscroll-behavior-inline -slug: Web/CSS/overscroll-behavior-inline -tags: - - CSS - - CSS Box Model - - CSS Logical Properties - - CSS Property - - NeedsExample - - Reference - - overscroll-behavior-inline - - 'recipe:css-property' -translation_of: Web/CSS/overscroll-behavior-inline ---- -
{{CSSRef}}
- -

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

- -

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

- -
/* キーワード値 */
-overscroll-behavior-inline: auto; /* default */
-overscroll-behavior-inline: contain;
-overscroll-behavior-inline: none;
-
-/* グローバル値 */
-overscroll-behavior-inline: inherit;
-overscroll-behavior-inline: initial;
-overscroll-behavior-inline: unset;
-
- -

構文

- -

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

- -

値

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

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

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

- -

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

- -

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>
- -

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 {
-  height: 300px;
-  width: 400px;
-  overflow: auto;
-  position: relative;
-  top: 50px;
-  left: 50px;
-  overscroll-behavior-inline: contain;
-}
-
-div > div {
-  height: 100%;
-  width: 1500px;
-  background-color: yellow;
-  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);
-}
-
-p {
-  padding: 10px;
-  background-color: rgba(255,0,0,0.5);
-  margin: 0;
-  width: 360px;
-  position: relative;
-  top: 10px;
-  left: 10px;
-}
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/overscroll-behavior-inline/index.md b/files/ja/web/css/overscroll-behavior-inline/index.md new file mode 100644 index 0000000000..30ee73ab8f --- /dev/null +++ b/files/ja/web/css/overscroll-behavior-inline/index.md @@ -0,0 +1,140 @@ +--- +title: overscroll-behavior-inline +slug: Web/CSS/overscroll-behavior-inline +tags: + - CSS + - CSS ボックスモデル + - CSS Logical Properties + - CSS Property + - NeedsExample + - Reference + - overscroll-behavior-inline + - 'recipe:css-property' +translation_of: Web/CSS/overscroll-behavior-inline +--- +
{{CSSRef}}
+ +

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

+ +

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

+ +
/* キーワード値 */
+overscroll-behavior-inline: auto; /* default */
+overscroll-behavior-inline: contain;
+overscroll-behavior-inline: none;
+
+/* グローバル値 */
+overscroll-behavior-inline: inherit;
+overscroll-behavior-inline: initial;
+overscroll-behavior-inline: unset;
+
+ +

構文

+ +

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

+ +

値

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

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

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

+ +

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

+ +

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>
+ +

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 {
+  height: 300px;
+  width: 400px;
+  overflow: auto;
+  position: relative;
+  top: 50px;
+  left: 50px;
+  overscroll-behavior-inline: contain;
+}
+
+div > div {
+  height: 100%;
+  width: 1500px;
+  background-color: yellow;
+  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);
+}
+
+p {
+  padding: 10px;
+  background-color: rgba(255,0,0,0.5);
+  margin: 0;
+  width: 360px;
+  position: relative;
+  top: 10px;
+  left: 10px;
+}
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

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