diff options
Diffstat (limited to 'files/ja/web/css/border-image/index.md')
| -rw-r--r-- | files/ja/web/css/border-image/index.md | 185 |
1 files changed, 89 insertions, 96 deletions
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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-image</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の<a href="/ja/docs/Web/CSS/border">境界</a>を置き換えます。</p> +**`border-image`** は [CSS](/ja/docs/Web/CSS) のプロパティで、指定された要素の周りに画像を描きます。これは要素の通常の[境界](/ja/docs/Web/CSS/border)を置き換えます。 -<div>{{EmbedInteractiveExample("pages/css/border-image.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-image.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +> **Note:** 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。仕様では厳密には要求されていませんが、{{cssxref("border-style")}} が `none` または {{cssxref("border-width")}} が `0` の場合、境界画像を描画しないブラウザーもあります。 -<p>このプロパティは {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}} の <a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティです。他の一括指定プロパティと同様、省略された値には<a href="/ja/docs/Web/CSS/initial_value">初期値</a>が設定されます。</p> +## 構成要素のプロパティ -<div class="note"> -<p><strong>メモ:</strong> 境界画像の読み込みに失敗したときのために、 {{cssxref("border-style")}} を指定してください。実際、仕様書によればこれが必須になっていますが、すべてのブラウザーがこの要件を実装しているわけではありません。</p> -</div> +このプロパティは以下の CSS プロパティの一括指定です。 -<h2 id="Syntax" name="Syntax">構文</h2> +- [`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) -<pre class="brush: css no-line-numbers">/* 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; -</pre> -<p><code>border-image</code> プロパティは以下に挙げられた1つから5つの値で指定することができます。</p> +/* グローバル値 */ +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")}} を参照してください。 -<div class="note"> -<p><strong>メモ:</strong> {{cssxref("border-image-source")}} の <a href="/ja/docs/Web/CSS/computed_value">計算値</a> が <code>none</code> になったり、画像が表示できなかったりした場合は、 {{cssxref("border-style")}} が代わりに表示されます。</p> -</div> +## アクセシビリティの考慮 -<h3 id="Values" name="Values">値</h3> +支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。 -<dl> - <dt><code><'border-image-source'></code></dt> - <dd>元となる画像です。 {{cssxref("border-image-source")}} を参照してください。</dd> - <dt><code><'border-image-slice'></code></dt> - <dd>source の画像を領域に分割する座標です。4つまでの値が指定できます。 {{cssxref("border-image-slice")}} を参照してください。</dd> - <dt><code><'border-image-width'></code></dt> - <dd>境界画像の幅です。4つまでの値が指定できます。 {{cssxref("border-image-width")}} を参照してください。</dd> - <dt><code><'border-image-outset'></code></dt> - <dd>要素の縁から境界画像までの間隔です。4つまでの値が指定できます。 {{cssxref("border-image-outset")}} を参照してください。</dd> - <dt><code><'border-image-repeat'></code></dt> - <dd>source の画像の辺の領域を境界画像の寸法にどのように合わせるかを定義します。2つまでの値が指定できます。 {{cssxref("border-image-repeat")}} を参照してください。</dd> -</dl> +- [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) -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Bitmap" name="Bitmap">ビットマップ</h3> +<h3 id="Bitmap">ビットマップ</h3> -<p>この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが3つずつ並んだ81×81ピクセルの ".png" ファイルです。</p> +この例では、要素の境界にダイヤモンド模様を適用します。 source の画像は、縦と横にダイヤモンドが 3 つずつ並んだ 81 × 81 ピクセルの ".png" ファイルです。 -<p><img alt="境界画像の例" src="https://mdn.mozillademos.org/files/4127/border.png" style="height: 81px; width: 81px;"></p> + -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><div id="bitmap">この要素はビットマップベースの境界画像に囲まれています。</div> -</pre> +```html +<div id="bitmap">この要素はビットマップベースの境界画像に囲まれています。</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<p>個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための <code>27</code> を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 <code>round</code> に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。</p> +個々のダイヤモンドの大きさに一致するように、3で割れる81の値を使用するか、角と辺の領域を分割するための `27` を使用します。境界画像が要素の背景の辺の中央になるように、 outset の値を幅の半分にします。最後に、 `round` に repeat の値を設定して、境界線の断片が等分に合うように、つまり、クリッピングをしたり隙間ができたりしないようにします。 -<pre class="brush:css">#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 */ } -</pre> +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Bitmap', '100%', 200)}}</p> +{{EmbedLiveSample('Bitmap', '100%', 200)}} -<h3 id="Gradient" name="Gradient">グラデーション</h3> +<h3 id="Gradient">グラデーション</h3> -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><div id="gradient">この要素はグラデーションの境界に囲まれています。</div> -</pre> +```html +<div id="gradient">この要素はグラデーションの境界に囲まれています。</div> +``` -<h4 id="CSS_2">CSS</h4> +#### CSS -<pre class="brush:css">#gradient { +```css +#gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } -</pre> - -<h4 id="Result_2" name="Result_2">結果</h4> - -<p>{{EmbedLiveSample('Gradient')}}</p> - -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>支援技術は境界画像を解釈することができません。画像にページ全体の目的を理解するために重要な情報が含まれている場合は、文書内に意味的に記述したほうがいいでしょう。</p> +``` -<ul> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN "WCAG を理解する ― ガイドライン 1.1 の解説"</a></li> - <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | Understanding WCAG 2.0</a></li> -</ul> +#### 結果 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{EmbedLiveSample('Gradient')}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## 仕様書 -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.border-image")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{cssxref("border")}}</li> - <li>{{cssxref("outline")}}</li> - <li>{{cssxref("box-shadow")}}</li> - <li>{{cssxref("background-image")}}</li> - <li>{{cssxref("url()", "url()")}} 関数</li> - <li>Gradient functions: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}</li> -</ul> +- {{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()")}} |