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/index.md | 185 ++++++++++++++++----------------- 1 file changed, 89 insertions(+), 96 deletions(-) (limited to 'files/ja/web/css/border-image') diff --git a/files/ja/web/css/border-image/index.md b/files/ja/web/css/border-image/index.md index 2373f83f56..d9b5df15a5 100644 --- a/files/ja/web/css/border-image/index.md +++ b/files/ja/web/css/border-image/index.md @@ -3,31 +3,35 @@ title: border-image slug: Web/CSS/border-image tags: - CSS - - CSS プロパティ - CSS 背景と境界 - - Reference - - border-image - - border-image-slice - - border-image-source + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.border-image translation_of: Web/CSS/border-image --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`border-image`** は [CSS](/ja/docs/Web/CSS) のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の[境界](/ja/docs/Web/CSS/border)を置き換えます。 -
{{EmbedInteractiveExample("pages/css/border-image.html")}}
+{{EmbedInteractiveExample("pages/css/border-image.html")}} - +> **Note:** 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。仕様では厳密には要求されていませんが、{{cssxref("border-style")}} が `none` または {{cssxref("border-width")}} が `0` の場合、境界画像を描画しないブラウザーもあります。 -

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

+## 構成要素のプロパティ -
-

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

-
+このプロパティは以下の CSS プロパティの一括指定です。 -

構文

+- [`border-image-outset`](/ja/docs/Web/CSS/border-image-outset) +- [`border-image-repeat`](/ja/docs/Web/CSS/border-image-repeat) +- [`border-image-slice`](/ja/docs/Web/CSS/border-image-slice) +- [`border-image-source`](/ja/docs/Web/CSS/border-image-source) +- [`border-image-width`](/ja/docs/Web/CSS/border-image-width) -
/* source | slice */
+## 構文
+
+```css
+/* source | slice */
 border-image: linear-gradient(red, blue) 27;
 
 /* source | slice | repeat */
@@ -38,51 +42,66 @@ 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つの値で指定することができます。

+/* グローバル値 */ +border-image: inherit; +border-image: initial; +border-image: revert; +border-image: unset; +``` + +`border-image` プロパティは以下に挙げた 1 つから 5 つの値で指定します。 + +> **Note:** {{cssxref("border-image-source")}} の [計算値](/ja/docs/Web/CSS/computed_value) が `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")}} を参照してください。 -
-

メモ: {{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")}} を参照してください。
-
+- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content) +- [Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html) -

形式文法

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

例

+## 例 -

ビットマップ

+

ビットマップ

-

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

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

境界画像の例

+![境界画像の例](border.png) -

HTML

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

CSS

+#### CSS -

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

+個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための `27` を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 `round` に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。 -
#bitmap {
+```css
+#bitmap {
   width: 200px;
   background-color: #ffa;
   border: 36px solid orange;
@@ -90,80 +109,54 @@ border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
   padding: 10px;
 
   border-image:
-      url("https://mdn.mozillademos.org/files/4127/border.png")  /* source */
+      url("border.png")  /* source */
       27 /                    /* slice */
       36px 28px 18px 8px /    /* width */
       18px 14px 9px 4px       /* outset */
       round;                  /* repeat */
 }
-
+``` -

結果

+#### 結果 -

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

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

グラデーション

+

グラデーション

-

HTML

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

CSS

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

結果

- -

{{EmbedLiveSample('Gradient')}}

- -

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

- -

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

+``` - +#### 結果 -

仕様書

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

{{cssinfo}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- {{cssxref("border")}} +- {{cssxref("outline")}} +- {{cssxref("box-shadow")}} +- {{cssxref("background-image")}} +- {{cssxref("url()", "url()")}} 関数 +- グラデーション関数: {{CSSxRef("gradient/conic-gradient()", "conic-gradient()")}}, {{CSSxRef("gradient/repeating-conic-gradient()", "repeating-conic-gradient()")}}, {{CSSxRef("gradient/linear-gradient()", "linear-gradient()")}}, {{CSSxRef("gradient/repeating-linear-gradient()", "repeating-linear-gradient()")}}, {{CSSxRef("gradient/radial-gradient()", "radial-gradient()")}}, {{CSSxRef("gradient/repeating-radial-gradient()", "repeating-radial-gradient()")}} -- cgit v1.2.3-54-g00ecf