From 366a8015ac69893836aaf4f56e24bee041ad2471 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 9 Nov 2021 01:04:30 +0900 Subject: border-image 関連のプロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/border-image-outset/index.html | 112 ---------------- files/ja/web/css/border-image-outset/index.md | 112 ++++++++++++++++ files/ja/web/css/border-image-repeat/index.html | 124 ----------------- files/ja/web/css/border-image-repeat/index.md | 124 +++++++++++++++++ files/ja/web/css/border-image-slice/index.html | 113 ---------------- files/ja/web/css/border-image-slice/index.md | 113 ++++++++++++++++ files/ja/web/css/border-image-source/index.html | 91 ------------- files/ja/web/css/border-image-source/index.md | 91 +++++++++++++ files/ja/web/css/border-image-width/index.html | 127 ------------------ files/ja/web/css/border-image-width/index.md | 127 ++++++++++++++++++ files/ja/web/css/border-image/index.html | 169 ------------------------ files/ja/web/css/border-image/index.md | 169 ++++++++++++++++++++++++ 12 files changed, 736 insertions(+), 736 deletions(-) delete mode 100644 files/ja/web/css/border-image-outset/index.html create mode 100644 files/ja/web/css/border-image-outset/index.md delete mode 100644 files/ja/web/css/border-image-repeat/index.html create mode 100644 files/ja/web/css/border-image-repeat/index.md delete mode 100644 files/ja/web/css/border-image-slice/index.html create mode 100644 files/ja/web/css/border-image-slice/index.md delete mode 100644 files/ja/web/css/border-image-source/index.html create mode 100644 files/ja/web/css/border-image-source/index.md delete mode 100644 files/ja/web/css/border-image-width/index.html create mode 100644 files/ja/web/css/border-image-width/index.md delete mode 100644 files/ja/web/css/border-image/index.html create mode 100644 files/ja/web/css/border-image/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/border-image-outset/index.html b/files/ja/web/css/border-image-outset/index.html deleted file mode 100644 index 5a917812d7..0000000000 --- a/files/ja/web/css/border-image-outset/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: border-image-outset -slug: Web/CSS/border-image-outset -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border-image -translation_of: Web/CSS/border-image-outset ---- -
{{CSSRef}}
- -

border-image-outset は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。

- -

境界画像のうち、 border-image-outset によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントをキャプチャしたりすることはありません。

- -
{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
- - - -

構文

- -
/* <length> 値 */
-border-image-outset: 1rem;
-
-/* <number> 値 */
-border-image-outset: 1.5;
-
-/* 上下 | 左右 */
-border-image-outset: 1 1.2;
-
-/* 上 | 左右 | 下 */
-border-image-outset: 30px 2 45px;
-
-/* 上 | 右 | 下 | 左 */
-border-image-outset: 7px 12px 14px 5px;
-
-/* グローバル値 */
-border-image-outset: inherit;
-border-image-outset: initial;
-border-image-outset: unset;
-
- -

border-image-outset プロパティは、1つから4つの値を使用して指定することができます。それぞれの値は {{cssxref("<length>")}} 又は {{cssxref("<number>")}} です。負の値は無効であり、指定すると border-image-outset の宣言が無効になります。

- -
    -
  1. 値が1つ指定された場合は、全4辺に適用されます。
    2. -
  2. 値が2つ指定された場合は、1つ目が上下に、2つ目が左右に適用されます。
    3. -
  3. 値が3つ指定された場合は、1つ目が上に、2つ目が左右に、3つ目が下に適用されます。
    4. -
  4. 値が4つ指定された場合は、上、右、下、左の順 (時計回り) で適用されます。
    5. -
- -

値

- -
-
{{cssxref("<length>")}}
-
border-image がはみ出す寸法を長さ — 数値と単位で指定します。
-
{{cssxref("<number>")}}
-
border-image がはみ出す寸法を、要素の対応する {{cssxref("border-width")}} の倍数で指定します。例えば、要素が border-width: 1em 2px 0 1.5rem で、 border-image-outset: 2 であると、最終的な border-image-outset は 2em 4px 0 3rem として計算されます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div id="outset">This element has an outset border image!</div>
-
- -

CSS

- -
#outset {
-  width: 10rem;
-  background: #cef;
-  border: 1.4rem solid;
-  border-image: radial-gradient(#ff2, #55f) 40;
-  border-image-outset: 1.5;  /* 1.5 × 1.4rem = 2.1rem */
-  margin: 2.1rem;
-}
- -

結果

- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/border-image-outset/index.md b/files/ja/web/css/border-image-outset/index.md new file mode 100644 index 0000000000..5a917812d7 --- /dev/null +++ b/files/ja/web/css/border-image-outset/index.md @@ -0,0 +1,112 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-image +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef}}
+ +

border-image-outset は CSS のプロパティで、要素の境界画像が境界ボックスからはみ出す幅を設定します。

+ +

境界画像のうち、 border-image-outset によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントをキャプチャしたりすることはありません。

+ +
{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
+ + + +

構文

+ +
/* <length> 値 */
+border-image-outset: 1rem;
+
+/* <number> 値 */
+border-image-outset: 1.5;
+
+/* 上下 | 左右 */
+border-image-outset: 1 1.2;
+
+/* 上 | 左右 | 下 */
+border-image-outset: 30px 2 45px;
+
+/* 上 | 右 | 下 | 左 */
+border-image-outset: 7px 12px 14px 5px;
+
+/* グローバル値 */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+
+ +

border-image-outset プロパティは、1つから4つの値を使用して指定することができます。それぞれの値は {{cssxref("<length>")}} 又は {{cssxref("<number>")}} です。負の値は無効であり、指定すると border-image-outset の宣言が無効になります。

+ +
    +
  1. 値が1つ指定された場合は、全4辺に適用されます。
    2. +
  2. 値が2つ指定された場合は、1つ目が上下に、2つ目が左右に適用されます。
    3. +
  3. 値が3つ指定された場合は、1つ目が上に、2つ目が左右に、3つ目が下に適用されます。
    4. +
  4. 値が4つ指定された場合は、上、右、下、左の順 (時計回り) で適用されます。
    5. +
+ +

値

+ +
+
{{cssxref("<length>")}}
+
border-image がはみ出す寸法を長さ — 数値と単位で指定します。
+
{{cssxref("<number>")}}
+
border-image がはみ出す寸法を、要素の対応する {{cssxref("border-width")}} の倍数で指定します。例えば、要素が border-width: 1em 2px 0 1.5rem で、 border-image-outset: 2 であると、最終的な border-image-outset は 2em 4px 0 3rem として計算されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div id="outset">This element has an outset border image!</div>
+
+ +

CSS

+ +
#outset {
+  width: 10rem;
+  background: #cef;
+  border: 1.4rem solid;
+  border-image: radial-gradient(#ff2, #55f) 40;
+  border-image-outset: 1.5;  /* 1.5 × 1.4rem = 2.1rem */
+  margin: 2.1rem;
+}
+ +

結果

+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +
{{cssinfo}}
+ +

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/border-image-repeat/index.html b/files/ja/web/css/border-image-repeat/index.html deleted file mode 100644 index 4c26330028..0000000000 --- a/files/ja/web/css/border-image-repeat/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: border-image-repeat -slug: Web/CSS/border-image-repeat -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - border-image - - リファレンス -translation_of: Web/CSS/border-image-repeat ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
- - - -

構文

- -
/* キーワード値 */
-border-image-repeat: stretch;
-border-image-repeat: repeat;
-border-image-repeat: round;
-border-image-repeat: space;
-
-/* 垂直 | 水平 */
-border-image-repeat: round stretch;
-
-/* グローバル値 */
-border-image-repeat: inherit;
-border-image-repeat: initial;
-border-image-repeat: unset;
-
- -

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

- - - -

値

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

形式文法

- -{{csssyntax}} - -

例

- -

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-repeat: stretch;  /* live sample で変更可能 */
-}
-
- - - -

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

- -

仕様策定状況

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

ブラウザーの対応

- -

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

diff --git a/files/ja/web/css/border-image-repeat/index.md b/files/ja/web/css/border-image-repeat/index.md new file mode 100644 index 0000000000..4c26330028 --- /dev/null +++ b/files/ja/web/css/border-image-repeat/index.md @@ -0,0 +1,124 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border-image + - リファレンス +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+border-image-repeat: stretch;
+border-image-repeat: repeat;
+border-image-repeat: round;
+border-image-repeat: space;
+
+/* 垂直 | 水平 */
+border-image-repeat: round stretch;
+
+/* グローバル値 */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

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

+ + + +

値

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

形式文法

+ +{{csssyntax}} + +

例

+ +

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-repeat: stretch;  /* live sample で変更可能 */
+}
+
+ + + +

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

+ +

仕様策定状況

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

ブラウザーの対応

+ +

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

diff --git a/files/ja/web/css/border-image-slice/index.html b/files/ja/web/css/border-image-slice/index.html deleted file mode 100644 index 194948f57c..0000000000 --- a/files/ja/web/css/border-image-slice/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: border-image-slice -slug: Web/CSS/border-image-slice -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - border-image - - border-image-slice - - リファレンス -translation_of: Web/CSS/border-image-slice ---- -
{{CSSRef}}
- -

CSS の border-image-slice プロパティは {{cssxref("border-image-source")}} で指定された画像を複数の領域に分割します。これらの領域は境界画像の部品を構成します。

- -
{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
- - - -

分割する過程で、4つの角、4つの辺、それに中央領域の計9つの領域を作成します。それぞれの辺からの距離で設定される4本の分割線が、領域の寸法を制御します。

- -

The nine regions defined by the border-image or border-image-slice properties

- -

上の図は、それぞれの領域の位置を説明しています。

- - - -

{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。

- -

構文

- -
/* すべての辺 */
-border-image-slice: 30%;
-
-/* 上下 | 左右 */
-border-image-slice: 10% 30%;
-
-/* 上 | 左右 | 下 */
-border-image-slice: 30 30% 45;
-
-/* 上 | 右 | 下 | 左 */
-border-image-slice: 7 12 14 5;
-
-/* `fill` キーワードの使用 */
-border-image-slice: 10% fill 7 12;
-
-/* グローバル値 */
-border-image-slice: inherit;
-border-image-slice: initial;
-border-image-slice: unset;
-
- -

border-image-slice プロパティは1つから4つの <number-percentage> 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は 100% に丸められます。

- - - -

fill の値は任意で、使用する場合は、宣言のどこにおいても構いません。

- -

値

- -
-
{{cssxref("<number>")}}
-
縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。
-
{{cssxref("<percentage>")}}
-
縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。
-
fill
-
中央の画像領域を維持し、背景画像のように表示しますが、実際の {{cssxref("background")}} の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。
-
- -

形式文法

- -{{csssyntax}} - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-image-slice/index.md b/files/ja/web/css/border-image-slice/index.md new file mode 100644 index 0000000000..194948f57c --- /dev/null +++ b/files/ja/web/css/border-image-slice/index.md @@ -0,0 +1,113 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - border-image + - border-image-slice + - リファレンス +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

CSS の border-image-slice プロパティは {{cssxref("border-image-source")}} で指定された画像を複数の領域に分割します。これらの領域は境界画像の部品を構成します。

+ +
{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
+ + + +

分割する過程で、4つの角、4つの辺、それに中央領域の計9つの領域を作成します。それぞれの辺からの距離で設定される4本の分割線が、領域の寸法を制御します。

+ +

The nine regions defined by the border-image or border-image-slice properties

+ +

上の図は、それぞれの領域の位置を説明しています。

+ + + +

{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。

+ +

構文

+ +
/* すべての辺 */
+border-image-slice: 30%;
+
+/* 上下 | 左右 */
+border-image-slice: 10% 30%;
+
+/* 上 | 左右 | 下 */
+border-image-slice: 30 30% 45;
+
+/* 上 | 右 | 下 | 左 */
+border-image-slice: 7 12 14 5;
+
+/* `fill` キーワードの使用 */
+border-image-slice: 10% fill 7 12;
+
+/* グローバル値 */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

border-image-slice プロパティは1つから4つの <number-percentage> 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は 100% に丸められます。

+ + + +

fill の値は任意で、使用する場合は、宣言のどこにおいても構いません。

+ +

値

+ +
+
{{cssxref("<number>")}}
+
縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。
+
{{cssxref("<percentage>")}}
+
縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。
+
fill
+
中央の画像領域を維持し、背景画像のように表示しますが、実際の {{cssxref("background")}} の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-image-source/index.html b/files/ja/web/css/border-image-source/index.html deleted file mode 100644 index ed546d28c8..0000000000 --- a/files/ja/web/css/border-image-source/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: border-image-source -slug: Web/CSS/border-image-source -tags: - - CSS - - CSS Borders - - CSS Property - - CSS プロパティ - - CSS 背景と境界 - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/border-image-source ---- -
{{CSSRef}}
- -

border-image-source は CSS のプロパティで、要素の境界画像に使われる元の画像を設定します。

- -
{{EmbedInteractiveExample("pages/css/border-image-source.html")}}
- - - -

元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために {{cssxref("border-image-slice")}} プロパティが使用されます。

- -

構文

- -
/* キーワード値 */
-border-image-source: none;
-
-/* <image> 値 */
-border-image-source: url(image.jpg);
-border-image-source: linear-gradient(to top, red, yellow);
-
-/* グローバル値 */
-border-image-source: inherit;
-border-image-source: initial;
-border-image-source: unset;
-
- -

値

- -
-
none
-
境界画像は使用されません。代わりに {{cssxref("border-style")}} で定義されたものが表示されます。
-
{{cssxref("<image>")}}
-
境界に使用する画像への参照です。
-
- -

公式定義

- -

{{CSSInfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

さまさまな値を使った表示例は、 {{cssxref("border-image")}} をご覧ください。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-image-source/index.md b/files/ja/web/css/border-image-source/index.md new file mode 100644 index 0000000000..ed546d28c8 --- /dev/null +++ b/files/ja/web/css/border-image-source/index.md @@ -0,0 +1,91 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +tags: + - CSS + - CSS Borders + - CSS Property + - CSS プロパティ + - CSS 背景と境界 + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-image-source +--- +
{{CSSRef}}
+ +

border-image-source は CSS のプロパティで、要素の境界画像に使われる元の画像を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-image-source.html")}}
+ + + +

元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために {{cssxref("border-image-slice")}} プロパティが使用されます。

+ +

構文

+ +
/* キーワード値 */
+border-image-source: none;
+
+/* <image> 値 */
+border-image-source: url(image.jpg);
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* グローバル値 */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+
+ +

値

+ +
+
none
+
境界画像は使用されません。代わりに {{cssxref("border-style")}} で定義されたものが表示されます。
+
{{cssxref("<image>")}}
+
境界に使用する画像への参照です。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

さまさまな値を使った表示例は、 {{cssxref("border-image")}} をご覧ください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/border-image-width/index.html b/files/ja/web/css/border-image-width/index.html deleted file mode 100644 index 996ba74890..0000000000 --- a/files/ja/web/css/border-image-width/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: border-image-width -slug: Web/CSS/border-image-width -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border-image -translation_of: Web/CSS/border-image-width ---- -
{{CSSRef}}
- -

border-image-width は CSS のプロパティで、要素の境界画像の幅を設定します。

- -
{{EmbedInteractiveExample("pages/css/border-image-width.html")}}
- - - -

このプロパティの値が要素の {{cssxref("border-width")}} よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

- -

構文

- -
/* キーワード値 */
-border-image-width: auto;
-
-/* <length> 値 */
-border-image-width: 1rem;
-
-/* <percentage> 値 */
-border-image-width: 25%;
-
-/* <number> 値 */
-border-image-width: 3;
-
-/* 上下 | 左右 */
-border-image-width: 2em 3em;
-
-/* 上 | 左右 | 下 */
-border-image-width: 5% 15% 10%;
-
-/* 上 | 右 | 下 | 左 */
-border-image-width: 5% 2em 10% auto;
-
-/* グローバル値 */
-border-image-width: inherit;
-border-image-width: initial;
-border-image-width: unset;
-
- -

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

- - - -

値

- -
-
<length-percentage>
-
境界の幅を、 {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} で指定します。パーセント値は水平オフセットにおいては境界画像の領域の幅、また垂直オフセットにおいては境界画像の領域の高さです。負の値であってはいけません。
-
<number>
-
境界の幅を、対応する {{cssxref("border-width")}} に対する倍率として指定します。負の値であってはいけません。
-
auto
-
境界の幅が、対応する {{cssxref("border-image-slice")}} の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する border-width が代わりに使用されます。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

この例は以下の90×90ピクセルの ".png" ファイルを使用して境界画像を作成します。

- -

- -

そして、元の画像内のそれぞれの円は30×30ピクセルです。

- -

HTML

- -
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
-
- -

CSS

- -
p {
-  border: 20px solid;
-  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
-  border-image-width: 16px;
-  padding: 40px;
-}
- -

結果

- -

{{EmbedLiveSample('Examples', 200, 240)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/border-image-width/index.md b/files/ja/web/css/border-image-width/index.md new file mode 100644 index 0000000000..996ba74890 --- /dev/null +++ b/files/ja/web/css/border-image-width/index.md @@ -0,0 +1,127 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-image +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

border-image-width は CSS のプロパティで、要素の境界画像の幅を設定します。

+ +
{{EmbedInteractiveExample("pages/css/border-image-width.html")}}
+ + + +

このプロパティの値が要素の {{cssxref("border-width")}} よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。

+ +

構文

+ +
/* キーワード値 */
+border-image-width: auto;
+
+/* <length> 値 */
+border-image-width: 1rem;
+
+/* <percentage> 値 */
+border-image-width: 25%;
+
+/* <number> 値 */
+border-image-width: 3;
+
+/* 上下 | 左右 */
+border-image-width: 2em 3em;
+
+/* 上 | 左右 | 下 */
+border-image-width: 5% 15% 10%;
+
+/* 上 | 右 | 下 | 左 */
+border-image-width: 5% 2em 10% auto;
+
+/* グローバル値 */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

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

+ + + +

値

+ +
+
<length-percentage>
+
境界の幅を、 {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} で指定します。パーセント値は水平オフセットにおいては境界画像の領域の幅、また垂直オフセットにおいては境界画像の領域の高さです。負の値であってはいけません。
+
<number>
+
境界の幅を、対応する {{cssxref("border-width")}} に対する倍率として指定します。負の値であってはいけません。
+
auto
+
境界の幅が、対応する {{cssxref("border-image-slice")}} の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する border-width が代わりに使用されます。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

この例は以下の90×90ピクセルの ".png" ファイルを使用して境界画像を作成します。

+ +

+ +

そして、元の画像内のそれぞれの円は30×30ピクセルです。

+ +

HTML

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+   no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+ +

CSS

+ +
p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Examples', 200, 240)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

diff --git a/files/ja/web/css/border-image/index.html b/files/ja/web/css/border-image/index.html deleted file mode 100644 index 2373f83f56..0000000000 --- a/files/ja/web/css/border-image/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: border-image -slug: Web/CSS/border-image -tags: - - CSS - - CSS プロパティ - - CSS 背景と境界 - - Reference - - border-image - - border-image-slice - - border-image-source -translation_of: Web/CSS/border-image ---- -
{{CSSRef}}
- -

border-image は CSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。

- -
{{EmbedInteractiveExample("pages/css/border-image.html")}}
- - - -

このプロパティは {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}} の 一括指定プロパティです。他の一括指定プロパティと同様、省略された値には初期値が設定されます。

- -
-

メモ: 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。実際、仕様書によればこれが必須になっていますが、すべてのブラウザーがこの要件を実装しているわけではありません。

-
- -

構文

- -
/* source | slice */
-border-image: linear-gradient(red, blue) 27;
-
-/* source | slice | repeat */
-border-image: url("/images/border.png") 27 space;
-
-/* source | slice | width */
-border-image: linear-gradient(red, blue) 27 / 35px;
-
-/* source | slice | width | outset | repeat */
-border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
-
- -

border-image プロパティは以下に挙げられた1つから5つの値で指定することができます。

- -
-

メモ: {{cssxref("border-image-source")}} の 計算値 が none になったり、画像が表示できなかったりした場合は、 {{cssxref("border-style")}} が代わりに表示されます。

-
- -

値

- -
-
<'border-image-source'>
-
元となる画像です。 {{cssxref("border-image-source")}} を参照してください。
-
<'border-image-slice'>
-
source の画像を領域に分割する座標です。4つまでの値が指定できます。 {{cssxref("border-image-slice")}} を参照してください。
-
<'border-image-width'>
-
境界画像の幅です。4つまでの値が指定できます。 {{cssxref("border-image-width")}} を参照してください。
-
<'border-image-outset'>
-
要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 {{cssxref("border-image-outset")}} を参照してください。
-
<'border-image-repeat'>
-
source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 {{cssxref("border-image-repeat")}} を参照してください。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

ビットマップ

- -

この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが3つずつ並んだ81×81ピクセルの ".png" ファイルです。

- -

境界画像の例

- -

HTML

- -
<div id="bitmap">この要素はビットマップベースの境界画像に囲まれています。</div>
-
- -

CSS

- -

個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための 27 を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 round に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。

- -
#bitmap {
-  width: 200px;
-  background-color: #ffa;
-  border: 36px solid orange;
-  margin: 30px;
-  padding: 10px;
-
-  border-image:
-      url("https://mdn.mozillademos.org/files/4127/border.png")  /* source */
-      27 /                    /* slice */
-      36px 28px 18px 8px /    /* width */
-      18px 14px 9px 4px       /* outset */
-      round;                  /* repeat */
-}
-
- -

結果

- -

{{EmbedLiveSample('Bitmap', '100%', 200)}}

- -

グラデーション

- -

HTML

- -
<div id="gradient">この要素はグラデーションの境界に囲まれています。</div>
-
- -

CSS

- -
#gradient {
-  width: 200px;
-  border: 30px solid;
-  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
-  padding: 20px;
-}
-
- -

結果

- -

{{EmbedLiveSample('Gradient')}}

- -

アクセシビリティの考慮事項

- -

支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/border-image/index.md b/files/ja/web/css/border-image/index.md new file mode 100644 index 0000000000..2373f83f56 --- /dev/null +++ b/files/ja/web/css/border-image/index.md @@ -0,0 +1,169 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS プロパティ + - CSS 背景と境界 + - Reference + - border-image + - border-image-slice + - border-image-source +translation_of: Web/CSS/border-image +--- +
{{CSSRef}}
+ +

border-image は CSS のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の境界を置き換えます。

+ +
{{EmbedInteractiveExample("pages/css/border-image.html")}}
+ + + +

このプロパティは {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}} の 一括指定プロパティです。他の一括指定プロパティと同様、省略された値には初期値が設定されます。

+ +
+

メモ: 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。実際、仕様書によればこれが必須になっていますが、すべてのブラウザーがこの要件を実装しているわけではありません。

+
+ +

構文

+ +
/* source | slice */
+border-image: linear-gradient(red, blue) 27;
+
+/* source | slice | repeat */
+border-image: url("/images/border.png") 27 space;
+
+/* source | slice | width */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* source | slice | width | outset | repeat */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+
+ +

border-image プロパティは以下に挙げられた1つから5つの値で指定することができます。

+ +
+

メモ: {{cssxref("border-image-source")}} の 計算値 が none になったり、画像が表示できなかったりした場合は、 {{cssxref("border-style")}} が代わりに表示されます。

+
+ +

値

+ +
+
<'border-image-source'>
+
元となる画像です。 {{cssxref("border-image-source")}} を参照してください。
+
<'border-image-slice'>
+
source の画像を領域に分割する座標です。4つまでの値が指定できます。 {{cssxref("border-image-slice")}} を参照してください。
+
<'border-image-width'>
+
境界画像の幅です。4つまでの値が指定できます。 {{cssxref("border-image-width")}} を参照してください。
+
<'border-image-outset'>
+
要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 {{cssxref("border-image-outset")}} を参照してください。
+
<'border-image-repeat'>
+
source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 {{cssxref("border-image-repeat")}} を参照してください。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

ビットマップ

+ +

この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが3つずつ並んだ81×81ピクセルの ".png" ファイルです。

+ +

境界画像の例

+ +

HTML

+ +
<div id="bitmap">この要素はビットマップベースの境界画像に囲まれています。</div>
+
+ +

CSS

+ +

個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための 27 を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 round に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。

+ +
#bitmap {
+  width: 200px;
+  background-color: #ffa;
+  border: 36px solid orange;
+  margin: 30px;
+  padding: 10px;
+
+  border-image:
+      url("https://mdn.mozillademos.org/files/4127/border.png")  /* source */
+      27 /                    /* slice */
+      36px 28px 18px 8px /    /* width */
+      18px 14px 9px 4px       /* outset */
+      round;                  /* repeat */
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Bitmap', '100%', 200)}}

+ +

グラデーション

+ +

HTML

+ +
<div id="gradient">この要素はグラデーションの境界に囲まれています。</div>
+
+ +

CSS

+ +
#gradient {
+  width: 200px;
+  border: 30px solid;
+  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
+  padding: 20px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Gradient')}}

+ +

アクセシビリティの考慮事項

+ +

支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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