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-width/index.html | 127 ------------------------- files/ja/web/css/border-image-width/index.md | 127 +++++++++++++++++++++++++ 2 files changed, 127 insertions(+), 127 deletions(-) delete mode 100644 files/ja/web/css/border-image-width/index.html create mode 100644 files/ja/web/css/border-image-width/index.md (limited to 'files/ja/web/css/border-image-width') 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")}}

-- cgit v1.2.3-54-g00ecf