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-width/border.png | Bin 0 -> 574 bytes files/ja/web/css/border-image-width/index.md | 120 ++++++++++++------------- 2 files changed, 57 insertions(+), 63 deletions(-) create mode 100644 files/ja/web/css/border-image-width/border.png (limited to 'files/ja/web/css/border-image-width') diff --git a/files/ja/web/css/border-image-width/border.png b/files/ja/web/css/border-image-width/border.png new file mode 100644 index 0000000000..9cc376418f Binary files /dev/null and b/files/ja/web/css/border-image-width/border.png differ diff --git a/files/ja/web/css/border-image-width/index.md b/files/ja/web/css/border-image-width/index.md index 996ba74890..2b719f8775 100644 --- a/files/ja/web/css/border-image-width/index.md +++ b/files/ja/web/css/border-image-width/index.md @@ -3,25 +3,25 @@ title: border-image-width slug: Web/CSS/border-image-width tags: - CSS - - CSS プロパティ - CSS 背景と境界 - - Reference - - border-image + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-image-width translation_of: Web/CSS/border-image-width --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-image-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[境界画像](/ja/docs/Web/CSS/border-image)の幅を設定します。 -
{{EmbedInteractiveExample("pages/css/border-image-width.html")}}
+{{EmbedInteractiveExample("pages/css/border-image-width.html")}} - +このプロパティの値が要素の {{cssxref("border-width")}} よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。 -

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

+## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 border-image-width: auto;
 
 /* <length> 値 */
@@ -45,83 +45,77 @@ border-image-width: 5% 2em 10% auto;
 /* グローバル値 */
 border-image-width: inherit;
 border-image-width: initial;
+border-image-width: revert;
 border-image-width: unset;
-
+``` + +`border-image-width` プロパティは下記の値のリストにある 1 つから 4 つの値を使用して指定することができます。 -

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

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

値

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

形式文法

+{{CSSInfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +

境界画像のタイリング

-

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

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

+![](border.png) -

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

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

HTML

+#### HTML -
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+```html
+
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>
-
+ no sea takimata sanctus est Lorem ipsum dolor sit amet.

+``` -

CSS

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

結果

+{{EmbedLiveSample('Tiling_a_border_image', 200, 240)}} -

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

+## 仕様書 -

仕様書

+{{Specifications}} - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}初回定義
+## ブラウザーの互換性 -

{{cssinfo}}

+{{Compat}} -

ブラウザーの互換性

+## 関連情報 -

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

+- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) -- cgit v1.2.3-54-g00ecf