border-image 系のプロパティを更新

- 2021/11/08 時点の英語版に同期

2 files changed, 68 insertions, 78 deletions

diff --git a/files/ja/web/css/border-image-repeat/border.png b/files/ja/web/css/border-image-repeat/border.png
new file mode 100644
index 0000000000..3e2e1e8100
--- /dev/null
+++ b/files/ja/web/css/border-image-repeat/border.png
diff --git a/files/ja/web/css/border-image-repeat/index.md b/files/ja/web/css/border-image-repeat/index.md
index 4c26330028..651141e352 100644
--- a/files/ja/web/css/border-image-repeat/index.md
+++ b/files/ja/web/css/border-image-repeat/index.md
@@ -3,23 +3,23 @@ title: border-image-repeat
 slug: Web/CSS/border-image-repeat
 tags:
   - CSS
-  - CSS プロパティ
   - CSS 背景と境界
-  - border-image
+  - CSS プロパティ
   - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.border-image-repeat
 translation_of: Web/CSS/border-image-repeat
 ---
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-image-repeat</code></strong> プロパティは、元画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を、どうやって要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>に合うように合わせるかを定義します。</p>
-
-<div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div>
+{{CSSRef}}
 
+[CSS](/ja/docs/Web/CSS) の **`border-image-repeat`** プロパティは、元画像の[辺の領域](/ja/docs/Web/CSS/border-image-slice#edge-regions)を、どうやって要素の[境界画像](/ja/docs/Web/CSS/border-image)に合うように合わせるかを定義します。
 
+{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers">/* キーワード値 */
+```css
+/* キーワード値 */
 border-image-repeat: stretch;
 border-image-repeat: repeat;
 border-image-repeat: round;
@@ -31,94 +31,84 @@ border-image-repeat: round stretch;
 /* グローバル値 */
 border-image-repeat: inherit;
 border-image-repeat: initial;
+border-image-repeat: revert;
 border-image-repeat: unset;
-</pre>
+```
 
-<p><code>border-image-repeat</code> プロパティは、下記の値のリストにある1つ又は2つの値を使用して指定することができます。</p>
+`border-image-repeat` プロパティは、下記の値のリストにある値を 1 つまたは 2 つ使用して指定することができます。
 
-<ul>
- <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じ動作が適用されます。</li>
- <li>値が<strong>2つ</strong>指定された場合、1つ目の動作が<strong>上下</strong>に、2つ目が<strong>左右</strong>に適用されます。</li>
-</ul>
+- 値が **1 つ**指定された場合、**全四辺**に同じ動作が適用されます。
+- 値が **2 つ**指定された場合、1 つ目の動作が**上下**に、2 つ目が**左右**に適用されます。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt><code>stretch</code></dt>
- <dd>2つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。</dd>
- <dt><code>repeat</code></dt>
- <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。</dd>
- <dt><code>round</code></dt>
- <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。</dd>
- <dt><code>space</code></dt>
- <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。</dd>
-</dl>
+- `stretch`
+  - : 2 つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。
+- `repeat`
+  - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。
+- `round`
+  - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。
+- `space`
+  - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 公式定義
+
+{{CSSInfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="CSS_content" name="CSS_content">CSS コンテンツ</h3>
+<h3 id="Repeating_border_images">反復する境界画像</h3>
 
-<pre class="brush: css; highlight[7]">#bordered {
+#### CSS
+
+```css
+#bordered {
   width: 12rem;
   margin-bottom: 1rem;
   padding: 1rem;
   border: 40px solid;
-  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+  border-image: url("border.png") 27;
   border-image-repeat: stretch;  /* live sample で変更可能 */
 }
-</pre>
+```
+
+```html hidden
+<div id="bordered">You can try out various border repetition rules on me!</div>
+
+<select id="repetition">
+  <option value="stretch">stretch</option>
+  <option value="repeat">repeat</option>
+  <option value="round">round</option>
+  <option value="space">space</option>
+  <option value="stretch repeat">stretch repeat</option>
+  <option value="space round">space round</option>
+</select>
+```
+
+```js hidden
+var repetition = document.getElementById("repetition");
+repetition.addEventListener("change", function (evt) {
+  document.getElementById("bordered").style.borderImageRepeat = evt.target.value;
+});
+```
 
-<div class="hidden">
-<h3 id="HTML">HTML</h3>
+#### 結果
 
-<pre class="brush: html">&lt;div id="bordered"&gt;You can try out various border repetition rules on me!&lt;/div&gt;
+{{EmbedLiveSample("Repeating_border_images", "auto", 200)}}
 
-&lt;select id="repetition"&gt;
-  &lt;option value="stretch"&gt;stretch&lt;/option&gt;
-  &lt;option value="repeat"&gt;repeat&lt;/option&gt;
-  &lt;option value="round"&gt;round&lt;/option&gt;
-  &lt;option value="space"&gt;space&lt;/option&gt;
-  &lt;option value="stretch repeat"&gt;stretch repeat&lt;/option&gt;
-  &lt;option value="space round"&gt;space round&lt;/option&gt;
-&lt;/select&gt;
-</pre>
+## 仕様書
 
-<h3 id="JavaScript">JavaScript</h3>
+{{Specifications}}
 
-<pre class="brush: js">var repetition = document.getElementById("repetition");
-repetition.addEventListener("change", function (evt) {
-  document.getElementById("bordered").style.borderImageRepeat = evt.target.value;
-});
-</pre>
-</div>
-
-<p>{{EmbedLiveSample("Example", "auto", 200)}}</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('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}</td>
-   <td>{{Spec2('CSS3 Backgrounds')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<div>{{cssinfo}}</div>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p>{{Compat("css.properties.border-image-repeat")}}</p>
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders)
+- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)