diff options
Diffstat (limited to 'files/ja/web/css/border-image-repeat/index.md')
| -rw-r--r-- | files/ja/web/css/border-image-repeat/index.md | 146 |
1 files changed, 68 insertions, 78 deletions
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"><div id="bordered">You can try out various border repetition rules on me!</div> +{{EmbedLiveSample("Repeating_border_images", "auto", 200)}} -<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> -</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) |