From e4b289e4a0e2a8f06d5badeb3a845f585e2819fc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 9 Nov 2021 23:21:41 +0900 Subject: border-image 系のプロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/08 時点の英語版に同期 --- files/ja/web/css/border-image-repeat/border.png | Bin 0 -> 507 bytes files/ja/web/css/border-image-repeat/index.md | 146 +++++++++++------------- 2 files changed, 68 insertions(+), 78 deletions(-) create mode 100644 files/ja/web/css/border-image-repeat/border.png (limited to 'files/ja/web/css/border-image-repeat') 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 Binary files /dev/null and b/files/ja/web/css/border-image-repeat/border.png differ 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 --- -
{{CSSRef}}
- -

CSS の border-image-repeat プロパティは、元画像の辺の領域を、どうやって要素の境界画像に合うように合わせるかを定義します。

- -
{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
+{{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")}} -

構文

+## 構文 -
/* キーワード値 */
+```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;
-
+``` -

border-image-repeat プロパティは、下記の値のリストにある1つ又は2つの値を使用して指定することができます。

+`border-image-repeat` プロパティは、下記の値のリストにある値を 1 つまたは 2 つ使用して指定することができます。 - +- 値が **1 つ**指定された場合、**全四辺**に同じ動作が適用されます。 +- 値が **2 つ**指定された場合、1 つ目の動作が**上下**に、2 つ目が**左右**に適用されます。 -

値

+### 値 -
-
stretch
-
2つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。
-
repeat
-
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。
-
round
-
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。
-
space
-
2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。
-
+- `stretch` + - : 2 つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。 +- `repeat` + - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。 +- `round` + - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。 +- `space` + - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。 -

形式文法

+## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

CSS コンテンツ

+

反復する境界画像

-
#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 で変更可能 */
 }
-
+``` + +```html hidden +
You can try out various border repetition rules on me!
+ + +``` + +```js hidden +var repetition = document.getElementById("repetition"); +repetition.addEventListener("change", function (evt) { + document.getElementById("bordered").style.borderImageRepeat = evt.target.value; +}); +``` - - -

{{EmbedLiveSample("Example", "auto", 200)}}

- -

仕様策定状況

- - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの対応

- -

{{Compat("css.properties.border-image-repeat")}}

+## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) -- cgit v1.2.3-54-g00ecf