diff options
Diffstat (limited to 'files/ja/web/css/border-image-outset')
| -rw-r--r-- | files/ja/web/css/border-image-outset/index.md | 108 |
1 files changed, 51 insertions, 57 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) |