aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web
diff options
context:
space:
mode:
Diffstat (limited to 'files/ja/web')
-rw-r--r--files/ja/web/css/inset-block-end/index.md111
-rw-r--r--files/ja/web/css/inset-block-start/index.md110
-rw-r--r--files/ja/web/css/inset-block/index.md123
-rw-r--r--files/ja/web/css/inset-inline-end/index.md111
-rw-r--r--files/ja/web/css/inset-inline-start/index.md113
-rw-r--r--files/ja/web/css/inset-inline/index.md123
-rw-r--r--files/ja/web/css/inset/index.md114
-rw-r--r--files/ja/web/css/overflow-block/index.md143
-rw-r--r--files/ja/web/css/overflow-inline/index.md142
-rw-r--r--files/ja/web/css/overscroll-behavior-block/index.md119
-rw-r--r--files/ja/web/css/overscroll-behavior-inline/index.md118
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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><span class="seoSummary"><strong><code>inset-block-end</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素における末尾からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。</span> {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+**`inset-block-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素における末尾からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
inset-block-end: 3px;
inset-block-end: 2.4em;
-/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+/* 包含ブロックの幅または高さに対する <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;
-</pre>
+```
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<h3 id="Values" name="Values">値</h3>
+### 値
-<p><code>inset-block-end</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+`inset-block-end` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Setting_block_end_offset" name="Setting_block_end_offset">ブロック方向の末尾のオフセットの設定</h3>
+<h3 id="Setting_block_end_offset">ブロック方向の末尾のオフセットの設定</h3>
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;div&gt;
- &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+ <p class="exampleText">テキストの例</p>
+</div>
+```
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">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;
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Setting_block_end_offset", 140, 140)}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-end", "inset-block-end")}}</td>
- <td>{{Spec2("CSS Logical Properties")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.inset-block-end")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}}</li>
- <li>対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><span class="seoSummary"><strong><code>inset-block-start</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素における先頭からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。</span> {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+**`inset-block-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素における先頭からの論理的なオフセットを定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
inset-block-start: 3px;
inset-block-start: 2.4em;
-/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+/* 包含ブロックの幅または高さに対する <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;
-</pre>
+```
+## 構文
-<h2 id="Syntax" name="Syntax">構文</h2>
+### 値
-<h3 id="Values" name="Values">値</h3>
+`inset-block-start` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。
-<p><code>inset-block-start</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+## 公式定義
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+{{cssinfo}}
-<p>{{cssinfo}}</p>
-
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Setting_block_start_offset" name="Setting_block_start_offset">ブロック方向の先頭のオフセットの設定</h3>
+<h3 id="Setting_block_start_offset">ブロック方向の先頭のオフセットの設定</h3>
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;div&gt;
- &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+ <p class="exampleText">テキストの例</p>
+</div>
+```
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">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;
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Setting_block_start_offset", 140, 140)}}</p>
-
-<h2 id="Specification" name="Specification">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block-start", "inset-block-start")}}</td>
- <td>{{Spec2("CSS Logical Properties")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.inset-block-start")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>内部位置を定義する他のプロパティ: {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}, {{cssxref("inset-inline-end")}}</li>
- <li>対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+{{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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><strong><code>inset-block</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素におけるブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+**`inset-block`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素におけるブロック方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
inset-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /* 値が先頭と末尾の両方に適用される */
-/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
inset-block: 10% 5%;
/* キーワード値 */
@@ -28,46 +30,47 @@ inset-block: auto;
/* グローバル値 */
inset-block: inherit;
inset-block: initial;
+inset-block: revert;
inset-block: unset;
-</pre>
+```
-<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+## 構成要素のプロパティ
-<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+このプロパティは以下の CSS プロパティの一括指定です。
-<ul>
- <li>{{cssxref("inset-block-end")}}</li>
- <li>{{cssxref("inset-block-start")}}</li>
-</ul>
+- {{cssxref("inset-block-end")}}
+- {{cssxref("inset-block-start")}}
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<h3 id="Values" name="Values">値</h3>
+### 値
-<p><code>inset-block</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+`inset-block` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Setting_block_start_and_end_offsets" name="Setting_block_start_and_end_offsets">ブロック方向の先頭と末尾のオフセットの設定</h3>
+<h3 id="Setting_block_start_and_end_offsets">ブロック方向の先頭と末尾のオフセットの設定</h3>
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;div&gt;
- &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+ <p class="exampleText">テキストの例</p>
+</div>
+```
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">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;
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Setting_block_start_and_end_offsets", 140, 140)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Logical Properties", "#propdef-inset-block", "inset-block")}}</td>
- <td>{{Spec2("CSS Logical Properties")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.inset-block")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
- <li>対応する物理的な一括指定: {{cssxref("inset")}}</li>
- <li>対応するインライン方向の一括指定: {{cssxref("inset-inline")}}</li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><span class="seoSummary"><strong><code>inset-inline-end</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素における行末からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。</span> {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+**`inset-inline-end`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素における行末からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
inset-inline-end: 3px;
inset-inline-end: 2.4em;
-/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+/* 包含ブロックの幅または高さに対する <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;
-</pre>
+```
-<p>{{cssxref("inset-inline-start")}} と <code>inset-inline-end</code> の一括指定は {{cssxref("inset-inline")}} です。</p>
+{{cssxref("inset-inline-start")}} と `inset-inline-end` の一括指定は {{cssxref("inset-inline")}} です。
+## 構文
-<h2 id="Syntax" name="Syntax">構文</h2>
+### 値
-<h3 id="Values" name="Values">値</h3>
+`inset-inline-end` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。
-<p><code>inset-inline-end</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+## 公式定義
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+{{cssinfo}}
-<p>{{cssinfo}}</p>
-
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Setting_inline_end_offset" name="Setting_inline_end_offset">インライン方向の末尾のオフセットの設定</h3>
+<h3 id="Setting_inline_end_offset">インライン方向の末尾のオフセットの設定</h3>
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;div&gt;
- &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+ <p class="exampleText">テキストの例</p>
+</div>
+```
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">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;
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Setting_inline_end_offset", 140, 140)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-end", "inset-inline-start")}}</td>
- <td>{{Spec2("CSS Logical Properties")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.inset-inline-end")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-start")}}</li>
- <li>対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><span class="seoSummary"><strong><code>inset-inline-start</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素における行頭からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。</span> {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+**`inset-inline-start`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素における行頭からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的なオフセットに対応付けられます。 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
inset-inline-start: 3px;
inset-inline-start: 2.4em;
-/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+/* 包含ブロックの幅または高さに対する <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;
-</pre>
+```
-<p><code>inset-inline-start</code> と {{cssxref("inset-inline-end")}} の一括指定は {{cssxref("inset-inline")}} です。</p>
+`inset-inline-start` と {{cssxref("inset-inline-end")}} の一括指定は {{cssxref("inset-inline")}} です。
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<h3 id="Values" name="Values">値</h3>
+### 値
-<p><code>inset-inline-start</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+`inset-inline-start` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Setting_inline_start_offset" name="Setting_inline_start_offset">インライン方向の先頭のオフセットの設定</h3>
+<h3 id="Setting_inline_start_offset">インライン方向の先頭のオフセットの設定</h3>
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;div&gt;
- &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+ <p class="exampleText">テキストの例</p>
+</div>
+```
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">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;
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Setting_inline_start_offset", 140, 140)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline-start", "inset-inline-start")}}</td>
- <td>{{Spec2("CSS Logical Properties")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.inset-inline-start")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>内部位置を定義する他のプロパティ: {{cssxref("inset-block-start")}}, {{cssxref("inset-block-end")}}, {{cssxref("inset-inline-end")}}</li>
- <li>対応する物理プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><strong><code>inset-inline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。</p>
+**`inset-inline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 {{cssxref("top")}} と {{cssxref("bottom")}}、または {{cssxref("right")}} と {{cssxref("left")}} のいずれかのプロパティに、 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} で定義された値に従って対応します。
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /* 値が先頭と末尾の両方に適用される */
-/* 包含ブロックの幅または高さに対する &lt;percentage&gt; 値 */
+/* 包含ブロックの幅または高さに対する <percentage> 値 */
inset-inline: 10% 5%;
/* キーワード値 */
@@ -28,46 +30,49 @@ inset-inline: auto;
/* グローバル値 */
inset-inline: inherit;
inset-inline: initial;
+inset-inline: revert;
inset-inline: unset;
-</pre>
+```
-<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+## 構成要素のプロパティ
-<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+このプロパティは以下の CSS プロパティの一括指定です。
-<ul>
- <li>{{cssxref("inset-inline-end")}}</li>
- <li>{{cssxref("inset-inline-start")}}</li>
-</ul>
+- {{cssxref("inset-inline-end")}}
+- {{cssxref("inset-inline-start")}}
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<h3 id="Values" name="Values">値</h3>
+### 値
-<p><code>inset-inline</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+`inset-inline` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Setting_inline_start_and_end_offsets" name="Setting_inline_start_and_end_offsets">インライン方向の先頭と末尾のオフセットの設定</h3>
+<h3 id="Setting_inline_start_and_end_offsets">インライン方向の先頭と末尾のオフセットの設定</h3>
<h4 id="HTML">HTML</h4>
-<pre class="brush: html notranslate">&lt;div&gt;
- &lt;p class="exampleText"&gt;テキストの例&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+#### HTML
-<h4 id="CSS">CSS</h4>
+```html
+<div>
+ <p class="exampleText">テキストの例</p>
+</div>
+```
-<pre class="brush: css notranslate">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;
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Setting_inline_start_and_end_offsets", 140, 140)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Logical Properties", "#propdef-inset-inline", "inset-inline")}}</td>
- <td>{{Spec2("CSS Logical Properties")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.inset-inline")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>対応する物理的プロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
- <li>対応する物理的な一括指定: {{cssxref("inset")}}</li>
- <li>対応するブロック方向の一括指定: {{cssxref("inset-block")}}</li>
- <li>{{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><strong><code>inset</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} に対応する一括指定です。これは {{cssxref("margin")}} の一括指定における複数値の場合と同じ構文です。</p>
+**`inset`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} に対応する一括指定です。これは {{cssxref("margin")}} の一括指定における複数値の場合と同じ構文です。
-<p><em>CSS 論理的プロパティ</em>の仕様書で定義されているものですが、<em>論理的</em>なオフセットを定義するものではありません。これは<em>物理的</em>なオフセットであり、要素の書字方向やテキストの向きには関係がありません。</p>
+*CSS 論理的プロパティ*の仕様書で定義されているものですが、*論理的*なオフセットを定義するものではありません。これは*物理的*なオフセットであり、要素の書字方向やテキストの向きには関係がありません。
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
inset: 10px; /* すべての辺に適用される値 */
inset: 4px 8px; /* 上/下 左/右 */
inset: 5px 15px 10px; /* 上 左/右 下 */
inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */
-/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する &lt;percentage&gt; */
+/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
inset: 10% 5% 5% 5%;
/* キーワード値 */
@@ -32,38 +34,40 @@ inset: auto;
/* グローバル値 */
inset: inherit;
inset: initial;
+inset: revert;
inset: unset;
+```
-</pre>
+## 構文
-<h2 id="Syntax" name="Syntax">構文</h2>
+### 値
-<h3 id="Values" name="Values">値</h3>
+`inset` プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。
-<p><code>inset</code> プロパティは {{cssxref("left")}} プロパティと同じ値を取ります。</p>
+## 公式定義
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+{{cssinfo}}
-<p>{{cssinfo}}</p>
-
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Setting_offsets_for_an_element" name="Setting_offsets_for_an_element">要素のオフセットの設定</h3>
+<h3 id="Setting_offsets_for_an_element">要素のオフセットの設定</h3>
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;div&gt;
- &lt;span class="exampleText"&gt;テキストの例&lt;/span&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div>
+ <span class="exampleText">テキストの例</span>
+</div>
+```
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">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;
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{EmbedLiveSample("Setting_offsets_for_an_element", 140, 140)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("CSS Logical Properties", "#propdef-inset", "inset")}}</td>
- <td>{{Spec2("CSS Logical Properties")}}</td>
- <td>初回定義</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.inset")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>個別指定のボックスのオフセットプロパティ: {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}</li>
- <li>対応する論理プロパティの一括指定: {{cssxref("inset-block")}} および {{cssxref("inset-inline")}}</li>
- <li>{{cssxref("margin")}} 一括指定の複数値の構文</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{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
---
-<p>{{CSSRef}}</p>
+{{CSSRef}}
-<p><strong><code>overflow-block</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。</p>
+**`overflow-block`** は [CSS](/ja/docs/Web/CSS) プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。
-<div class="note">
-<p><code>overflow-block</code> プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。</p>
-</div>
+> **Note:** `overflow-block` プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```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;
-</pre>
+```
-<p><code>overflow-block</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p>
+`overflow-block` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。
-<h3 id="Values" name="Values">値</h3>
+### 値
-<dl>
- <dt><code>visible</code></dt>
- <dd>内容は切り取られず、パディングボックスのブロックの先頭とブロックの末尾の辺よりも外側に表示される可能性があります。</dd>
- <dt><code>hidden</code></dt>
- <dd>ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。</dd>
- <dt><code>scroll</code></dt>
- <dd>ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。</dd>
- <dt><code>auto</code></dt>
- <dd>ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。</dd>
-</dl>
+- `visible`
+ - : 内容は切り取られず、パディングボックスのブロックの先頭とブロックの末尾の辺よりも外側に表示される可能性があります。
+- `hidden`
+ - : ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
+- `scroll`
+ - : ブロック方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
+- `auto`
+ - : ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
-<p>{{CSSInfo}}</p>
+{{CSSInfo}}
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
-<h3 id="HTML">HTML</h3>
+### HTML
-<pre class="brush: html notranslate">&lt;ul&gt;
- &lt;li&gt;&lt;code&gt;overflow-block:hidden&lt;/code&gt; — ボックスの外側のテキストを隠す
- &lt;div id="div1"&gt;
+```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.
- &lt;/div&gt;
- &lt;/li&gt;
+ </div>
+ </li>
- &lt;li&gt;&lt;code&gt;overflow-block:scroll&lt;/code&gt; — 常にスクロールバーを表示
- &lt;div id="div2"&gt;
+ <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.
- &lt;/div&gt;
- &lt;/li&gt;
+ </div>
+ </li>
- &lt;li&gt;&lt;code&gt;overflow-block:visible&lt;/code&gt; — 必要に応じてテキストをボックスの外に表示
- &lt;div id="div3"&gt;
+ <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.
- &lt;/div&gt;
- &lt;/li&gt;
+ </div>
+ </li>
- &lt;li&gt;&lt;code&gt;overflow-block:auto&lt;/code&gt; — 多くのブラウザーでは &lt;code&gt;scroll&lt;/code&gt; と同じ
- &lt;div id="div4"&gt;
+ <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.
- &lt;/div&gt;
- &lt;/li&gt;
-&lt;/ul&gt;
-
-</pre>
+ </div>
+ </li>
+</ul>
+```
-<h3 id="CSS">CSS</h3>
+### CSS
-<pre class="brush: css notranslate">#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;}
-</pre>
+```
-<h3 id="Result" name="Result">結果</h3>
+### 結果
-<figure>
-<p>{{EmbedLiveSample("Examples", "100%", "780")}}</p>
-</figure>
+{{EmbedLiveSample("Examples", "100%", "780")}}
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{ SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }}</td>
- <td>{{ Spec2('CSS3 Overflow') }}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
+{{Specifications}}
-<div>{{cssinfo}}</div>
+## ブラウザーの互換性
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+{{Compat}}
-<p>{{Compat("css.properties.overflow-block")}}</p>
+## 関連情報
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
- <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理プロパティ</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a></li>
-</ul>
+- 関連する 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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><strong><code>overflow-inline</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。</p>
+**`overflow-inline`** は [CSS](/ja/docs/Web/CSS) のプロパティで、内容がボックスのインライン方向の先頭および末尾方向の端をはみ出した時に、どのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させるの何れかになります。
-<div class="note">
-<p><code>overflow-inline</code> プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。</p>
-</div>
+> **Note:** `overflow-inline` プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```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;
-</pre>
+```
-<p><code>overflow-inline</code> プロパティは、以下の値の一覧のうち一つのキーワードで指定します。</p>
+`overflow-inline` プロパティは、以下の値の一覧のうち一つのキーワードで指定します。
-<h3 id="Values" name="Values">値</h3>
+### 値
-<dl>
- <dt><code>visible</code></dt>
- <dd>内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。</dd>
- <dt><code>hidden</code></dt>
- <dd>インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。</dd>
- <dt><code>scroll</code></dt>
- <dd>インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。</dd>
- <dt><code>auto</code></dt>
- <dd>ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は <code>visible</code> と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。</dd>
-</dl>
+- `visible`
+ - : 内容は切り取られず、パディングボックスのインライン方向の先頭と末尾の辺よりも外側に表示される可能性があります。
+- `hidden`
+ - : インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。スクロールバーは表示されません。
+- `scroll`
+ - : インライン方向にパディングボックスに合わせる必要がある場合は、内容を切り取ります。ブラウザーは内容が実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これは内容が変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターははみ出す内容を印刷するかもしれません。
+- `auto`
+ - : ユーザーエージェントに依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Setting_inline_overflow_behavior" name="Setting_inline_overflow_behavior">インライン方向のはみ出し動作の設定</h3>
+<h3 id="Setting_inline_overflow_behavior">インライン方向のはみ出し動作の設定</h3>
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;ul&gt;
- &lt;li&gt;&lt;code&gt;overflow-inline:hidden&lt;/code&gt; — ボックスの外側のテキストを隠す
- &lt;div id="div1"&gt;
+```html
+<ul>
+ <li><code>overflow-inline:hidden</code> — ボックスの外側のテキストを隠す
+ <div id="div1">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
- &lt;/div&gt;
- &lt;/li&gt;
+ </div>
+ </li>
- &lt;li&gt;&lt;code&gt;overflow-inline:scroll&lt;/code&gt; — 常にスクロールバーを表示
- &lt;div id="div2"&gt;
+ <li><code>overflow-inline:scroll</code> — 常にスクロールバーを表示
+ <div id="div2">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
- &lt;/div&gt;
- &lt;/li&gt;
+ </div>
+ </li>
- &lt;li&gt;&lt;code&gt;overflow-inline:visible&lt;/code&gt; — 必要に応じてテキストをボックスの外に表示
- &lt;div id="div3"&gt;
+ <li><code>overflow-inline:visible</code> — 必要に応じてテキストをボックスの外に表示
+ <div id="div3">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
- &lt;/div&gt;
- &lt;/li&gt;
+ </div>
+ </li>
- &lt;li&gt;&lt;code&gt;overflow-inline:auto&lt;/code&gt; — 多くのブラウザーでは &lt;code&gt;scroll&lt;/code&gt; と同じ
- &lt;div id="div4"&gt;
+ <li><code>overflow-inline:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ
+ <div id="div4">
ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ
- &lt;/div&gt;
- &lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+ </div>
+ </li>
+</ul>
+```
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">#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;}
-</pre>
+```
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
-<figure>
-<p>{{EmbedLiveSample("Setting_inline_overflow_behavior", "100%", "270")}}</p>
-</figure>
+{{EmbedLiveSample("Setting_inline_overflow_behavior", "100%", "270")}}
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}}</td>
- <td>{{Spec2('CSS3 Overflow')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
+{{Specifications}}
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
-<p>{{Compat("css.properties.overflow-inline")}}</p>
+{{Compat}}
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
-<ul>
- <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-block")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
- <li><a href="/ja/docs/Web/CSS/CSS_Logical_Properties">CSS 論理プロパティ</a></li>
- <li><a href="/ja/docs/Web/CSS/CSS_Writing_Modes">書字方向</a></li>
-</ul>
+- 関連する 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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><span class="seoSummary"><strong><code>overscroll-behavior-block</code></strong> は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。</span></p>
+**`overscroll-behavior-block`** は CSS のプロパティで、スクロール領域のブロック方向の境界に達したときのブラウザーの挙動を設定します。
-<p>全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。</p>
+全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```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;
-</pre>
+```
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<p><code>overscroll-behavior-block</code> プロパティは、次の値の一覧のうち一つのキーワードで指定します。</p>
+`overscroll-behavior-block` プロパティは、次の値の一覧のうち一つのキーワードで指定します。
-<h3 id="Values" name="Values">値</h3>
+### 値
-<dl>
- <dt><code>auto</code></dt>
- <dd>スクロールの末端における既定の振る舞いが通常通りに発生します。</dd>
- <dt><code>contain</code></dt>
- <dd>この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。</dd>
- <dt><code>none</code></dt>
- <dd>隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。</dd>
-</dl>
+- `auto`
+ - : スクロールの末端における既定の振る舞いが通常通りに発生します。
+- `contain`
+ - : この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。
+- `none`
+ - : 隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Preventing_block_overscrolling" name="Preventing_block_overscrolling">ブロック方向のオーバースクロールの抑止</h3>
+<h3 id="Preventing_block_overscrolling">ブロック方向のオーバースクロールの抑止</h3>
-<p>このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と <code>height</code>) が小さく、ビューポート内にきちんと収まりますが、内容は広い <code>height</code> を持つため、垂直にスクロールします。</p>
+このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("height")}} を持っているので、ページは垂直にスクロールします。内側のボックスは {{cssxref("width")}} (と `height`) が小さく、ビューポート内にきちんと収まりますが、内容は広い `height` を持つため、垂直にスクロールします。
-<p>既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに <code>overscroll-behavior-block: contain</code> を設定しました。</p>
+既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。ブロック方向でこれが発生することを防ぐために、内側のボックスに `overscroll-behavior-block: contain` を設定しました。
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;main&gt;
- &lt;div&gt;
- &lt;div&gt;
- &lt;p&gt;&lt;code&gt;overscroll-behavior-block&lt;/code&gt; 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.&lt;/p&gt;
- &lt;/div&gt;
- &lt;/div&gt;
-&lt;/main&gt;</pre>
+```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>
+```
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">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 &gt; div {
+main > div {
height: 300px;
width: 400px;
overflow: auto;
@@ -89,7 +92,7 @@ main &gt; div {
overscroll-behavior-block: contain;
}
-div &gt; div {
+div > div {
height: 1500px;
width: 100%;
background-color: yellow;
@@ -104,37 +107,21 @@ p {
position: relative;
top: 10px;
left: 10px;
-}</pre>
+}
+```
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
-<p>{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}</p>
+{{EmbedLiveSample('Preventing_block_overscrolling','100%', 500)}}
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-block', 'overscroll-behavior-block')}}</td>
- <td>{{Spec2('CSS Overscroll Behavior')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
+{{Specifications}}
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
-<p>{{Compat("css.properties.overscroll-behavior-block")}}</p>
+{{Compat}}
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
-<ul>
- <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">スクロールを制御する: 引いて更新や末端の効果のカスタマイズ</a></li>
-</ul>
+- [スクロールを制御する: 引いて更新や末端の効果のカスタマイズ](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
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p><span class="seoSummary"><strong><code>overscroll-behavior-inline</code></strong> は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。</span></p>
+**`overscroll-behavior-inline`** は CSS のプロパティで、スクロール領域のインライン方向の境界に達したときのブラウザーの挙動を設定します。
-<p>全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。</p>
+全体的な説明は {{cssxref("overscroll-behavior")}} を参照してください。
-<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
+```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;
-</pre>
+```
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
-<p><code>overscroll-behavior-inline</code> プロパティは、次の値の一覧のうち一つのキーワードで指定します。</p>
+`overscroll-behavior-inline` プロパティは、次の値の一覧のうち一つのキーワードで指定します。
-<h3 id="Values" name="Values">値</h3>
+### 値
-<dl>
- <dt><code>auto</code></dt>
- <dd>スクロールの末端における既定の振る舞いが通常通りに発生します。</dd>
- <dt><code>contain</code></dt>
- <dd>この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。</dd>
- <dt><code>none</code></dt>
- <dd>隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。</dd>
-</dl>
+- `auto`
+ - : スクロールの末端における既定の振る舞いが通常通りに発生します。
+- `contain`
+ - : この値が設定された要素の内部では、スクロールの末端における既定の振る舞いが見られますが、隣接するスクロール領域に対するスクロール連鎖はありません。例えば、基底となる要素はスクロールしません。
+- `none`
+ - : 隣接するスクロール領域に対するスクロール連鎖はなく、スクロールの末端における既定の振る舞いが抑制されます。
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
-<p>{{cssinfo}}</p>
+{{cssinfo}}
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
{{csssyntax}}
-<h2 id="Examples" name="Examples">例</h2>
+## 例
-<h3 id="Preventing_inline_overscrolling" name="Preventing_inline_overscrolling">インライン方向のオーバースクロールの抑止</h3>
+<h3 id="Preventing_inline_overscrolling">インライン方向のオーバースクロールの抑止</h3>
-<p>このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。</p>
+このデモでは、一方がもう一方の中にある二つのブロックレベルボックスがあります。外側のボックスは広い {{cssxref("width")}} を持っているので、ページは水平にスクロールします。内側のボックスは width (と {{cssxref("height")}}) が小さく、ビューポート内にきちんと収まりますが、内容は広い幅を持ち、水平にスクロールします。
-<p>既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに <code>overscroll-behavior-inline: contain</code> を設定しました。</p>
+既定では、内側のボックスがスクロールして境界に達すると、ページ全体がスクロールし始めますが、これはおそらく望ましくない動きです。インライン方向でこれが発生することを防ぐために、内側のボックスに `overscroll-behavior-inline: contain` を設定しました。
-<h4 id="HTML" name="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html notranslate">&lt;main&gt;
- &lt;div&gt;
- &lt;div&gt;
- &lt;p&gt;&lt;code&gt;overscroll-behavior-inline&lt;/code&gt; 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.&lt;/p&gt;
- &lt;/div&gt;
- &lt;/div&gt;
-&lt;/main&gt;</pre>
+```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>
+```
-<h4 id="CSS" name="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css notranslate">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 &gt; div {
+main > div {
height: 300px;
width: 400px;
overflow: auto;
@@ -89,7 +93,7 @@ main &gt; div {
overscroll-behavior-inline: contain;
}
-div &gt; div {
+div > div {
height: 100%;
width: 1500px;
background-color: yellow;
@@ -104,37 +108,21 @@ p {
position: relative;
top: 10px;
left: 10px;
-}</pre>
+}
+```
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
-<p>{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}</p>
+{{EmbedLiveSample('Preventing_inline_overscrolling','100%', 500)}}
-<h2 id="Specifications" name="Specifications">仕様書</h2>
+## 仕様書
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">仕様書</th>
- <th scope="col">状態</th>
- <th scope="col">備考</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior-inline', 'overscroll-behavior-inline')}}</td>
- <td>{{Spec2('CSS Overscroll Behavior')}}</td>
- <td></td>
- </tr>
- </tbody>
-</table>
+{{Specifications}}
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
-<p>{{Compat("css.properties.overscroll-behavior-x")}}</p>
+{{Compat}}
-<h2 id="See_also" name="See_also">関連情報</h2>
+## 関連情報
-<ul>
- <li><a href="https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo">スクロールを制御する: 引いて更新や末端の効果のカスタマイズ</a></li>
-</ul>
+- [スクロールを制御する: 引いて更新や末端の効果のカスタマイズ](https://developers.google.com/web/updates/2017/11/overscroll-behavior#demo)
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-11-14 13:28:55 +0000