diff options
Diffstat (limited to 'files/ja')
| -rw-r--r-- | files/ja/web/css/border-image-outset/index.md | 108 | ||||
| -rw-r--r-- | files/ja/web/css/border-image-repeat/border.png | bin | 0 -> 507 bytes | |||
| -rw-r--r-- | files/ja/web/css/border-image-repeat/index.md | 146 | ||||
| -rw-r--r-- | files/ja/web/css/border-image-slice/border-diamonds.png | bin | 0 -> 424 bytes | |||
| -rw-r--r-- | files/ja/web/css/border-image-slice/border-image-slice.png | bin | 0 -> 9791 bytes | |||
| -rw-r--r-- | files/ja/web/css/border-image-slice/index.md | 190 | ||||
| -rw-r--r-- | files/ja/web/css/border-image-source/index.md | 106 | ||||
| -rw-r--r-- | files/ja/web/css/border-image-width/border.png | bin | 0 -> 574 bytes | |||
| -rw-r--r-- | files/ja/web/css/border-image-width/index.md | 120 | ||||
| -rw-r--r-- | files/ja/web/css/border-image/index.md | 185 |
10 files changed, 442 insertions, 413 deletions
diff --git a/files/ja/web/css/border-image-outset/index.md b/files/ja/web/css/border-image-outset/index.md index 5a917812d7..4b0c761570 100644 --- a/files/ja/web/css/border-image-outset/index.md +++ b/files/ja/web/css/border-image-outset/index.md @@ -3,28 +3,28 @@ title: border-image-outset slug: Web/CSS/border-image-outset tags: - CSS - - CSS プロパティ - CSS 背景と境界 - - Reference - - border-image + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-image-outset translation_of: Web/CSS/border-image-outset --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-image-outset</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>が境界ボックスからはみ出す幅を設定します。</p> +**`border-image-outset`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[境界画像](/ja/docs/Web/CSS/border-image)が境界ボックスからはみ出す幅を設定します。 -<p>境界画像のうち、 <code>border-image-outset</code> によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントをキャプチャしたりすることはありません。</p> +境界画像のうち、 `border-image-outset` によって要素の境界ボックスの外に表示された部分は、はみ出した際にスクロールバーを表示させたり、マウスイベントを受け取ったりすることはありません。 -<div>{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-image-outset.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ border-image-outset: 1rem; -/* <number> 値 */ +/* <number> 値 */ border-image-outset: 1.5; /* 上下 | 左右 */ @@ -39,74 +39,68 @@ border-image-outset: 7px 12px 14px 5px; /* グローバル値 */ border-image-outset: inherit; border-image-outset: initial; +border-image-outset: revert; border-image-outset: unset; -</pre> +``` + +`border-image-outset` プロパティは、1 つから 4 つの値を使用して指定することができます。それぞれの値は {{cssxref("<length>")}} または {{cssxref("<number>")}} です。負の値は無効であり、指定すると `border-image-outset` の宣言が無効になります。 -<p><code>border-image-outset</code> プロパティは、1つから4つの値を使用して指定することができます。それぞれの値は {{cssxref("<length>")}} 又は {{cssxref("<number>")}} です。負の値は無効であり、指定すると <code>border-image-outset</code> の宣言が無効になります。</p> +1. 値が **1 つ**指定された場合は、**全四辺**に適用されます。 +2. 値が **2 つ**指定された場合は、1 つ目が**上下**に、2 つ目が**左右**に適用されます。 +3. 値が **3 つ**指定された場合は、1 つ目が**上**に、2 つ目が**左右**に、3 つ目が**下**に適用されます。 +4. 値が **4 つ**指定された場合は、**上**、**右**、**下**、**左**の順 (時計回り) で適用されます。 -<ol> - <li>値が<strong>1つ</strong>指定された場合は、<strong>全4辺</strong>に適用されます。</li> - <li>値が<strong>2つ</strong>指定された場合は、1つ目が<strong>上下</strong>に、2つ目が<strong>左右</strong>に適用されます。</li> - <li>値が<strong>3つ</strong>指定された場合は、1つ目が<strong>上</strong>に、2つ目が<strong>左右</strong>に、3つ目が<strong>下</strong>に適用されます。</li> - <li>値が<strong>4つ</strong>指定された場合は、<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) で適用されます。</li> -</ol> +### 値 -<h3 id="Values" name="Values">値</h3> +- {{cssxref("<length>")}} + - : `border-image` がはみ出す寸法を長さ — 数値と単位で指定します。 +- {{cssxref("<number>")}} + - : `border-image` がはみ出す寸法を、要素の対応する {{cssxref("border-width")}} の倍数で指定します。例えば、要素が `border-width: 1em 2px 0 1.5rem` で、 `border-image-outset: 2` であると、最終的な `border-image-outset` は `2em 4px 0 3rem` として計算されます。 -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd><code>border-image</code> がはみ出す寸法を長さ — 数値と単位で指定します。</dd> - <dt>{{cssxref("<number>")}}</dt> - <dd><code>border-image</code> がはみ出す寸法を、要素の対応する {{cssxref("border-width")}} の倍数で指定します。例えば、要素が <code>border-width: 1em 2px 0 1.5rem</code> で、 <code>border-image-outset: 2</code> であると、最終的な <code>border-image-outset</code> は <code>2em 4px 0 3rem</code> として計算されます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Outsetting_a_border_image">境界画像をはみ出させる</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div id="outset">This element has an outset border image!</div> -</pre> +```html +<div id="outset">この要素の境界画像ははみ出しています。</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">#outset { +```css +#outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; -}</pre> +} +``` + +#### 例 -<h3 id="Result" name="Result">結果</h3> +{{EmbedLiveSample("Outsetting_a_border_image", "auto", 200)}} -<p>{{EmbedLiveSample("Example", "auto", 200)}}</p> +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{Specifications}} -<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-outset', 'border-image-outset')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 -<div>{{cssinfo}}</div> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## 関連情報 -<p>{{Compat("css.properties.border-image-outset")}}</p> +- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/ja/web/css/border-image-repeat/border.png b/files/ja/web/css/border-image-repeat/border.png Binary files differnew file mode 100644 index 0000000000..3e2e1e8100 --- /dev/null +++ b/files/ja/web/css/border-image-repeat/border.png diff --git a/files/ja/web/css/border-image-repeat/index.md b/files/ja/web/css/border-image-repeat/index.md index 4c26330028..651141e352 100644 --- a/files/ja/web/css/border-image-repeat/index.md +++ b/files/ja/web/css/border-image-repeat/index.md @@ -3,23 +3,23 @@ title: border-image-repeat slug: Web/CSS/border-image-repeat tags: - CSS - - CSS プロパティ - CSS 背景と境界 - - border-image + - CSS プロパティ - リファレンス + - recipe:css-property +browser-compat: css.properties.border-image-repeat translation_of: Web/CSS/border-image-repeat --- -<div>{{CSSRef}}</div> - -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-image-repeat</code></strong> プロパティは、元画像の<a href="/ja/docs/Web/CSS/border-image-slice#edge-regions">辺の領域</a>を、どうやって要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>に合うように合わせるかを定義します。</p> - -<div>{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}</div> +{{CSSRef}} +[CSS](/ja/docs/Web/CSS) の **`border-image-repeat`** プロパティは、元画像の[辺の領域](/ja/docs/Web/CSS/border-image-slice#edge-regions)を、どうやって要素の[境界画像](/ja/docs/Web/CSS/border-image)に合うように合わせるかを定義します。 +{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ border-image-repeat: stretch; border-image-repeat: repeat; border-image-repeat: round; @@ -31,94 +31,84 @@ border-image-repeat: round stretch; /* グローバル値 */ border-image-repeat: inherit; border-image-repeat: initial; +border-image-repeat: revert; border-image-repeat: unset; -</pre> +``` -<p><code>border-image-repeat</code> プロパティは、下記の値のリストにある1つ又は2つの値を使用して指定することができます。</p> +`border-image-repeat` プロパティは、下記の値のリストにある値を 1 つまたは 2 つ使用して指定することができます。 -<ul> - <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じ動作が適用されます。</li> - <li>値が<strong>2つ</strong>指定された場合、1つ目の動作が<strong>上下</strong>に、2つ目が<strong>左右</strong>に適用されます。</li> -</ul> +- 値が **1 つ**指定された場合、**全四辺**に同じ動作が適用されます。 +- 値が **2 つ**指定された場合、1 つ目の動作が**上下**に、2 つ目が**左右**に適用されます。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>stretch</code></dt> - <dd>2つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。</dd> - <dt><code>repeat</code></dt> - <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。</dd> - <dt><code>round</code></dt> - <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。</dd> - <dt><code>space</code></dt> - <dd>2つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。</dd> -</dl> +- `stretch` + - : 2 つの境界の間を埋めるために、元画像の辺の領域が引き伸ばされます。 +- `repeat` + - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域の一部が切り取られることがあります。 +- `round` + - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域が引き延ばされることがあります。 +- `space` + - : 2 つの境界の間を埋めるために、元画像の辺の領域を (繰り返して) 並べます。寸法を合わせるために領域間に間隔が置かれることがあります。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 公式定義 + +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="CSS_content" name="CSS_content">CSS コンテンツ</h3> +<h3 id="Repeating_border_images">反復する境界画像</h3> -<pre class="brush: css; highlight[7]">#bordered { +#### CSS + +```css +#bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; - border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; + border-image: url("border.png") 27; border-image-repeat: stretch; /* live sample で変更可能 */ } -</pre> +``` + +```html hidden +<div id="bordered">You can try out various border repetition rules on me!</div> + +<select id="repetition"> + <option value="stretch">stretch</option> + <option value="repeat">repeat</option> + <option value="round">round</option> + <option value="space">space</option> + <option value="stretch repeat">stretch repeat</option> + <option value="space round">space round</option> +</select> +``` + +```js hidden +var repetition = document.getElementById("repetition"); +repetition.addEventListener("change", function (evt) { + document.getElementById("bordered").style.borderImageRepeat = evt.target.value; +}); +``` -<div class="hidden"> -<h3 id="HTML">HTML</h3> +#### 結果 -<pre class="brush: html"><div id="bordered">You can try out various border repetition rules on me!</div> +{{EmbedLiveSample("Repeating_border_images", "auto", 200)}} -<select id="repetition"> - <option value="stretch">stretch</option> - <option value="repeat">repeat</option> - <option value="round">round</option> - <option value="space">space</option> - <option value="stretch repeat">stretch repeat</option> - <option value="space round">space round</option> -</select> -</pre> +## 仕様書 -<h3 id="JavaScript">JavaScript</h3> +{{Specifications}} -<pre class="brush: js">var repetition = document.getElementById("repetition"); -repetition.addEventListener("change", function (evt) { - document.getElementById("bordered").style.borderImageRepeat = evt.target.value; -}); -</pre> -</div> - -<p>{{EmbedLiveSample("Example", "auto", 200)}}</p> - -<h2 id="Specifications" name="Specifications">仕様策定状況</h2> - -<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-repeat', 'border-image-repeat')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<div>{{cssinfo}}</div> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.border-image-repeat")}}</p> +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) diff --git a/files/ja/web/css/border-image-slice/border-diamonds.png b/files/ja/web/css/border-image-slice/border-diamonds.png Binary files differnew file mode 100644 index 0000000000..47828ebd0d --- /dev/null +++ b/files/ja/web/css/border-image-slice/border-diamonds.png diff --git a/files/ja/web/css/border-image-slice/border-image-slice.png b/files/ja/web/css/border-image-slice/border-image-slice.png Binary files differnew file mode 100644 index 0000000000..1fca0be6e4 --- /dev/null +++ b/files/ja/web/css/border-image-slice/border-image-slice.png diff --git a/files/ja/web/css/border-image-slice/index.md b/files/ja/web/css/border-image-slice/index.md index 194948f57c..7788ec9c88 100644 --- a/files/ja/web/css/border-image-slice/index.md +++ b/files/ja/web/css/border-image-slice/index.md @@ -5,36 +5,34 @@ tags: - CSS - CSS プロパティ - CSS 背景と境界 - - border-image - - border-image-slice + - NeedsExample - リファレンス + - recipe:css-property +browser-compat: css.properties.border-image-slice translation_of: Web/CSS/border-image-slice --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>border-image-slice</code></strong> プロパティは {{cssxref("border-image-source")}} で指定された画像を複数の領域に分割します。これらの領域は<a href="/ja/docs/Web/CSS/border-image">境界画像</a>の部品を構成します。</p> +**`border-image-slice`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("border-image-source")}} で指定された画像を複数の領域に分割します。これらの領域は[境界画像](/ja/docs/Web/CSS/border-image)の部品を構成します。 -<div>{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-image-slice.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +分割する過程で、4 つの角、4 つの辺、それに中央領域の計 9 つの領域を作成します。それぞれの辺からの距離で設定される 4 本の分割線が、領域の寸法を制御します。 -<p>分割する過程で、4つの角、4つの辺、それに中央領域の計9つの領域を作成します。それぞれの辺からの距離で設定される4本の分割線が、領域の寸法を制御します。</p> +[](/ja/docs/Web/CSS/border-image-slice/border-image-slice.png) -<p><a href="/files/3814/border-image-slice.png"><img alt="The nine regions defined by the border-image or border-image-slice properties" src="/files/3814/border-image-slice.png" style="margin: 1px; padding: 1em; width: 460px;"></a></p> +上の図は、それぞれの領域の位置を説明しています。 -<p>上の図は、それぞれの領域の位置を説明しています。</p> +- 1-4 の領域は角領域です。それぞれが1回ずつ使用され、最終的な境界画像の中で四隅を形成します。 +- 5-8 の領域は辺領域です。これらは最終的な境界画像の中で、要素の寸法に合わせて[反復、拡縮、その他の加工が行なわれ](/ja/docs/Web/CSS/border-image-repeat)ます。 +- 9 の領域は中央領域です。既定では描画されませんが、キーワード `fill` がセットされていれば背景画像のように使用されます。 -<ul> - <li>1-4 の領域は<span id="corner-regions">角の領域</span>です。それぞれが1回ずつ使用され、最終的な境界画像の中で四隅を形成します。</li> - <li>5-8 の領域は <span id="edge-regions">辺の領域</span>です。これらは最終的な境界画像の中で、要素の寸法に合わせて<a href="/ja/docs/Web/CSS/border-image-repeat">反復、拡縮、その他の加工が行なわれ</a>ます。</li> - <li>9 の領域は<span id="middle-region">中央領域</span>です。既定では描画されませんが、キーワード <code>fill</code> がセットされていれば背景画像のように使用されます。</li> -</ul> +{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。 -<p>{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} の各プロパティは、最終的な境界画像を構成するためにこれらの領域が使用される方法を指定します。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* すべての辺 */ +```css +/* すべての辺 */ border-image-slice: 30%; /* 上下 | 左右 */ @@ -52,62 +50,136 @@ border-image-slice: 10% fill 7 12; /* グローバル値 */ border-image-slice: inherit; border-image-slice: initial; +border-image-slice: revert; border-image-slice: unset; -</pre> +``` -<p><code>border-image-slice</code> プロパティは1つから4つの <code><number-percentage></code> 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は <code>100%</code> に丸められます。</p> +`border-image-slice` プロパティは 1 つから 4 つの `<number-percentage>` 値を使用して指定することができます。負の値は無効です。実際の寸法よりも大きい値は `100%` に丸められます。 -<ul> - <li>位置が<strong>1つ</strong>指定された場合、全4本の分割線がそれぞれの辺から同じ距離で作成されます。</li> - <li>位置が<strong>2つ</strong>指定された場合、1つ目の値を<strong>上下</strong>の辺からの距離として、2つ目を<strong>左右</strong>の辺からの距離として分割線を作成します。</li> - <li>位置が<strong>3つ</strong>指定された場合、1つ目の値を<strong>上</strong>の辺からの距離として、2つ目を<strong>左右</strong>の辺からの距離、3つ目は<strong>下</strong>の辺からの距離として分割線を作成します。</li> - <li>位置が<strong>4つ</strong>指定された場合、<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順（時計回り）でそれぞれの辺からの距離として分割線を作成します。</li> -</ul> +- 位置が **1 つ**指定された場合、全 4 本の分割線がそれぞれの辺から同じ距離で作成されます。 +- 位置が **2 つ**指定された場合、1 つ目の値を**上下**の辺からの距離として、2 つ目を**左右**の辺からの距離として分割線を作成します。 +- 位置が **3 つ**指定された場合、1 つ目の値を**上**の辺からの距離として、2 つ目を**左右**の辺からの距離、3 つ目は**下**の辺からの距離として分割線を作成します。 +- 位置が **4 つ**指定された場合、**上**、**右**、**下**、**左**の順（時計回り）でそれぞれの辺からの距離として分割線を作成します。 + +`fill` の値は任意で、使用する場合は、宣言のどこに置いても構いません。 + +### 値 -<p><code>fill</code> の値は任意で、使用する場合は、宣言のどこにおいても構いません。</p> +- {{cssxref("<number>")}} + - : 縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。 +- {{cssxref("<percentage>")}} + - : 縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。 +- `fill` + - : 中央の画像領域を維持し、背景画像のように表示しますが、実際の {{cssxref("background")}} の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt>{{cssxref("<number>")}}</dt> - <dd>縁からのオフセットを、ラスター画像の場合はピクセル数で、ベクター画像の場合は座標で表します。ベクター画像の場合、数値は元の画像の寸法ではなく、要素の寸法に対する相対値になるので、この場合は一般にパーセント値の方が適しています。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>縁からのオフセットを、元の画像の寸法、つまり水平方向のオフセットであれば画像の幅、垂直方向のオフセットであれば画像の高さに対するパーセント値で表します。</dd> - <dt><code>fill</code></dt> - <dd>中央の画像領域を維持し、背景画像のように表示しますが、実際の {{cssxref("background")}} の上に重ねられます。幅と高さは、画像領域のそれぞれ上と左に一致するように拡縮されます。</dd> -</dl> +{{CSSInfo}} -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +## 形式文法 {{csssyntax}} -<h2 id="Specifications" name="Specifications">仕様書</h2> +## 例 -<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-slice', 'border-image-slice')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h3 id="Adjustable_border_width_and_slice">調整のできる境界の幅とスライス</h3> -<p>{{cssinfo}}</p> +次の例は、シンプルな `<div>` に境界画像を設定したものです。境界のソース画像は以下の通りです。 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + -<p>{{Compat("css.properties.border-image-slice")}}</p> +ダイヤモンドの幅は 30px なので、[`border-width`](/ja/docs/Web/CSS/border-width) と `border-image-slice` の両方に 30 ピクセルを設定すると、ボーダーに完全でかなり鮮明なダイヤモンドが表示されます。 -<h2 id="See_also" name="See_also">関連情報</h2> +```css +border-width: 30px; +border-image-slice: 30; +``` + +これらは、この例で使用している既定値です。しかし、上記の 2 つのプロパティの値を動的に変更できるように、2 つのスライダーを用意し、その効果を確認できるようにしています。 + +`border-image-slice` は、各境界と境界の角 (および `fill` キーワードが使用されている場合はコンテンツ領域) で使用するためにサンプリングされる画像スライスの寸法を変更します。 - これを 30 から遠ざけると、境界が多少不規則に見えますが、面白い効果が得られます。 + +`border-width`: 境界線の幅を変更します。サンプリングされた画像の大きさは境界線の内側に収まるように拡大縮小されます。つまり、幅がスライスよりも大きい場合、画像が多少ピクセル化して見えるようになります (もちろん、SVG 画像を使用している場合は別です)。 + +#### HTML + +```html +<div class="wrapper"> + <div></div> +</div> <ul> - <li><a href="/ja/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases">1～4つの値による構文の図による説明</a></li> + <li> + <label for="width">スライドして <code>border-width</code> を調整</label> + <input type="range" min="10" max="45" id="width"> + <output id="width-output">30px</output> + </li> + <li> + <label for="slice">スライドして <code>border-image-slice</code> を調整</label> + <input type="range" min="10" max="45" id="slice"> + <output id="slice-output">30</output> + </li> </ul> +``` + +#### CSS + +```css +.wrapper { + width: 400px; + height: 300px; +} + +div > div { + width: 300px; + height: 200px; + border-width: 30px; + border-style: solid; + border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png); + border-image-slice: 30; + border-image-repeat: round; +} + +li { + display: flex; + place-content: center; +} +``` + +#### JavaScript + +```js +const widthSlider = document.getElementById('width'); +const sliceSlider = document.getElementById('slice'); +const widthOutput = document.getElementById('width-output'); +const sliceOutput = document.getElementById('slice-output'); +const divElem = document.querySelector('div > div'); + +widthSlider.addEventListener('input', () => { + const newValue = widthSlider.value + 'px'; + divElem.style.borderWidth = newValue; + widthOutput.textContent = newValue; +}) + +sliceSlider.addEventListener('input', () => { + const newValue = sliceSlider.value; + divElem.style.borderImageSlice = newValue; + sliceOutput.textContent = newValue; +}) +``` + +#### 結果 + +{{EmbedLiveSample('Adjustable_border_width_and_slice', '100%', 400)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [1 ～ 4 つの値による構文の図による説明](/ja/docs/Web/CSS/Shorthand_properties#tricky_edge_cases) diff --git a/files/ja/web/css/border-image-source/index.md b/files/ja/web/css/border-image-source/index.md index ed546d28c8..a4fb06ac95 100644 --- a/files/ja/web/css/border-image-source/index.md +++ b/files/ja/web/css/border-image-source/index.md @@ -3,27 +3,25 @@ title: border-image-source slug: Web/CSS/border-image-source tags: - CSS - - CSS Borders - - CSS Property - - CSS プロパティ - CSS 背景と境界 - - Reference - - 'recipe:css-property' + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.border-image-source translation_of: Web/CSS/border-image-source --- -<div>{{CSSRef}}</div> - -<p><strong><code>border-image-source</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>に使われる元の画像を設定します。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/border-image-source.html")}}</div> +**`border-image-source`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[境界画像](/ja/docs/Web/CSS/border-image)に使われる元の画像を設定します。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/css/border-image-source.html")}} -<p>元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために {{cssxref("border-image-slice")}} プロパティが使用されます。</p> +元の画像を最終的な境界画像に動的に適用する上で、複数の領域に分割するために {{cssxref("border-image-slice")}} プロパティが使用されます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ border-image-source: none; /* <image> 値 */ @@ -33,59 +31,47 @@ border-image-source: linear-gradient(to top, red, yellow); /* グローバル値 */ border-image-source: inherit; border-image-source: initial; +border-image-source: revert; border-image-source: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>none</code></dt> - <dd>境界画像は使用されません。代わりに {{cssxref("border-style")}} で定義されたものが表示されます。</dd> - <dt>{{cssxref("<image>")}}</dt> - <dd>境界に使用する画像への参照です。</dd> -</dl> +- `none` + - : 境界画像は使用されません。代わりに {{cssxref("border-style")}} で定義されたものが表示されます。 +- {{cssxref("<image>")}} + - : 境界に使用する画像への参照です。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{CSSInfo}}</p> +{{CSSInfo}} -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> - -<p>さまさまな値を使った表示例は、 {{cssxref("border-image")}} をご覧ください。</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<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-source', 'border-image-source')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.border-image-source")}}</p> - -<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> -</ul> +## 例 + +### 基本的な例 + +```css +.box { + border-image-source: url('image.png'); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{cssxref("border")}} +- {{cssxref("outline")}} +- {{cssxref("box-shadow")}} +- {{cssxref("background-image")}} +- {{cssxref("url()", "url()")}} 関数 diff --git a/files/ja/web/css/border-image-width/border.png b/files/ja/web/css/border-image-width/border.png Binary files differnew file mode 100644 index 0000000000..9cc376418f --- /dev/null +++ b/files/ja/web/css/border-image-width/border.png 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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><strong><code>border-image-width</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/border-image">境界画像</a>の幅を設定します。</p> +**`border-image-width`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[境界画像](/ja/docs/Web/CSS/border-image)の幅を設定します。 -<div>{{EmbedInteractiveExample("pages/css/border-image-width.html")}}</div> +{{EmbedInteractiveExample("pages/css/border-image-width.html")}} -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +このプロパティの値が要素の {{cssxref("border-width")}} よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。 -<p>このプロパティの値が要素の {{cssxref("border-width")}} よりも大きい場合、境界画像はパディング領域 (またはコンテンツ領域) の縁に向けて拡張されます。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* キーワード値 */ +```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; -</pre> +``` + +`border-image-width` プロパティは下記の値のリストにある 1 つから 4 つの値を使用して指定することができます。 -<p><code>border-image-width</code> プロパティは下記の値のリストにある1つから4つの値を使用して指定することができます。</p> +- 値が **1 つ**指定された場合、**全 4 辺**に同じ幅が適用されます。 +- 値が **2 つ**指定された場合、1 つ目の幅が**上下**に、2 つ目が**左右**に適用されます。 +- 値が **3 つ**指定された場合、1 つ目の幅が**上**に、2 つ目が**左右**に、3 つ目が**下**に適用されます。 +- 値が **4 つ**指定された場合、幅は**上**、**右**、**下**、**左**の順 (時計回り) で適用されます。 -<ul> - <li>値が<strong>1つ</strong>指定された場合、<strong>全4辺</strong>に同じ幅が適用されます。</li> - <li>値が<strong>2つ</strong>指定された場合、1つ目の幅が<strong>上下</strong>に、2つ目が<strong>左右</strong>に適用されます。</li> - <li>値が<strong>3つ</strong>指定された場合、1つ目の幅が<strong>上</strong>に、2つ目が<strong>左右</strong>に、3つ目が<strong>下</strong>に適用されます。</li> - <li>値が<strong>4つ</strong>指定された場合、幅は<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) で適用されます。</li> -</ul> +### 値 -<h3 id="Values" name="Values">値</h3> +- `<length-percentage>` + - : 境界の幅を、 {{cssxref("<length>")}} または {{cssxref("<percentage>")}} で指定します。パーセント値は水平オフセットにおいては境界画像の領域の*幅*、また垂直オフセットにおいては境界画像の領域の*高さ*です。負の値であってはいけません。 +- `<number>` + - : 境界の幅を、対応する {{cssxref("border-width")}} に対する倍率として指定します。負の値であってはいけません。 +- `auto` + - : 境界の幅が、対応する {{cssxref("border-image-slice")}} の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する `border-width` が代わりに使用されます。 -<dl> - <dt><code><length-percentage></code></dt> - <dd>境界の幅を、 {{cssxref("<length>")}} 又は {{cssxref("<percentage>")}} で指定します。パーセント値は水平オフセットにおいては境界画像の領域の<em>幅</em>、また垂直オフセットにおいては境界画像の領域の<em>高さ</em>です。負の値であってはいけません。</dd> - <dt><code><number></code></dt> - <dd>境界の幅を、対応する {{cssxref("border-width")}} に対する倍率として指定します。負の値であってはいけません。</dd> - <dt><code>auto</code></dt> - <dd>境界の幅が、対応する {{cssxref("border-image-slice")}} の本質的な幅と高さ (もしあれば) と等しくなるようにします。画像が本質的な寸法を持っていないのであれば、対応する <code>border-width</code> が代わりに使用されます。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 + +<h3 id="Tiling_a_border_image">境界画像のタイリング</h3> -<p>この例は以下の90×90ピクセルの ".png" ファイルを使用して境界画像を作成します。</p> +この例は以下の 90 × 90 ピクセルの ".png" ファイルを使用して境界画像を作成します。 -<p><img alt="" src="https://mdn.mozillademos.org/files/10470/border.png"></p> + -<p>そして、元の画像内のそれぞれの円は30×30ピクセルです。</p> +そして、元の画像内のそれぞれの円は 30 × 30 ピクセルです。 -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy +```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> -</pre> + no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: 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; -}</pre> +} +``` + +#### 結果 -<h3 id="Result" name="Result">結果</h3> +{{EmbedLiveSample('Tiling_a_border_image', 200, 240)}} -<p>{{EmbedLiveSample('Examples', 200, 240)}}</p> +## 仕様書 -<h2 id="Specifications" name="Specifications">仕様書</h2> +{{Specifications}} -<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', '#border-image-width', 'border-image-width')}}</td> - <td>{{Spec2('CSS3 Backgrounds')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +## ブラウザーの互換性 -<p>{{cssinfo}}</p> +{{Compat}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## 関連情報 -<p>{{Compat("css.properties.border-image-width")}}</p> +- [背景と境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders) +- [CSS の学習: 背景と境界](/ja/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) 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()")}} |
