From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/border-image/index.html | 171 +++++++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/ja/web/css/border-image/index.html (limited to 'files/ja/web/css/border-image') diff --git a/files/ja/web/css/border-image/index.html b/files/ja/web/css/border-image/index.html new file mode 100644 index 0000000000..0ee0aa316a --- /dev/null +++ b/files/ja/web/css/border-image/index.html @@ -0,0 +1,171 @@ +--- +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