From dc36f70aa600797fd07c7324f39fdde1a5ae71d9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 14 Nov 2021 10:11:43 +0900 Subject: CSS Backgrounds に関するプロパティの文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/12 時点の英語版に同期 --- files/ja/web/css/background-clip/index.md | 150 +++++++++++++----------------- 1 file changed, 67 insertions(+), 83 deletions(-) (limited to 'files/ja/web/css/background-clip') diff --git a/files/ja/web/css/background-clip/index.md b/files/ja/web/css/background-clip/index.md index 6c318174a8..23cd03facc 100644 --- a/files/ja/web/css/background-clip/index.md +++ b/files/ja/web/css/background-clip/index.md @@ -3,33 +3,29 @@ title: background-clip slug: Web/CSS/background-clip tags: - CSS - - CSS Background - - CSS Property - - Reference - - 'recipe:css-property' + - CSS 背景 + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.background-clip translation_of: Web/CSS/background-clip --- -

+{{CSSRef}} -

background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。

+**`background-clip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。 -

+{{EmbedInteractiveExample("pages/css/background-clip.html")}} - +要素に {{cssxref("background-image")}} または {{cssxref("background-color")}} がない場合、このプロパティは ({{cssxref("border-style")}} または {{cssxref("border-image")}} によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。 -

要素に {{cssxref("background-image")}} または {{cssxref("background-color")}} がない場合、このプロパティは ({{cssxref("border-style")}} または {{cssxref("border-image")}} によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。

+> **Note:** [ルート要素](/ja/docs/Web/HTML/Element/html)は異なる背景の描画領域を持っているため、その要素に `background-clip` プロパティが指定されても効果はありません。「[特殊要素の背景](https://drafts.csswg.org/css-backgrounds-3/#special-backgrounds)」を参照してください。 -

注: ルート要素は異なる背景の描画領域を持っているため、その要素に background-clip プロパティが指定されても効果はありません。「特殊要素の背景」を参照してください。

+> **Note:** [ルート要素](/ja/docs/Web/HTML/Element/html)が HTML 要素である文書の場合、ルート要素上の {{cssxref("background-image")}} の計算値が `none` であり、その {{cssxref("background-color")}} が `transparent` であると、ユーザーエージェントは代わりに、 `background` プロパティの計算値をその要素の HTML の {{HTMLElement("body")}} の子要素から伝搬させなければなりません。その `` 要素の `background` プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 `` 要素にキャンバスの背景を指定することを推奨します。 -

注: ルート要素が HTML 要素である文書の場合、ルート要素上の {{cssxref("background-image")}} の計算値が none であり、その {{cssxref("background-color")}} が transparent であると、ユーザーエージェントは代わりに、 {{cssxref("background")}} プロパティの計算値をその要素の HTML の {{HTMLElement("body")}} の子要素から伝搬させなければなりません。その <body> 要素の background プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 <body> 要素にキャンバスの背景を指定することを推奨します。

+## 構文 -

構文

- -

/* キーワード値 */
+```css
+/* キーワード値 */
 background-clip: border-box;
 background-clip: padding-box;
 background-clip: content-box;
@@ -38,43 +34,52 @@ background-clip: text;
 /* グローバル値 */
 background-clip: inherit;
 background-clip: initial;
+background-clip: revert;
 background-clip: unset;
-

+``` + +### 値 + +- `border-box` + - : 背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。 +- `padding-box` + - : 背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。 +- `content-box` + - : 背景をコンテンツボックスの中に (切り取って) 表示します。 +- `text` + - : 背景を前景のテキストの中に (切り取って) 表示します。 + +## アクセシビリティの考慮 -

値

+`background-clip: text` を使用する際には、背景色とその上に配置されたテキストの色のコントラスト比が、弱視の人がページの内容を読むことができる程度に高いことを確認してください。 -

border-box: 背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
padding-box: 背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
content-box: 背景をコンテンツボックスの中に (切り取って) 表示します。
text {{experimental_inline}}: 背景を前景のテキストの中に (切り取って) 表示します。

+背景画像が読み込まれないと、テキストが読めなくなることがあります。これを防ぐために、代替の {{cssxref("background-color")}} を追加し、画像なしでテストしてください。 -

公式定義

+{{cssxref("@supports")}} で機能クエリの使用し、`background-clip: text` に対応しているかどうかをテストして、対応していない場合はアクセス可能な代替手段を提供することを検討してください。 -

+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

HTML

+### HTML -

<p class="border-box">背景が境界の裏まで拡張されます。</p>
-<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p>
-<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p>
-<p class="text">背景が前景のテキストで切り取られます。</p>
-

+```html +

背景が境界の裏まで拡張されます。

背景が境界の内側の縁まで拡張されます。

背景がコンテンツボックスの縁までだけ表示されます。

背景が前景のテキストで切り取られます。

+``` -

CSS

+### CSS -

p {
+```css
+p {
   border: .8em darkviolet;
   border-style: dotted double;
   margin: 1em 0;
@@ -92,44 +97,23 @@ background-clip: unset;
   background-clip: text;
   -webkit-background-clip: text;
   color: rgba(0,0,0,.2);
-}

- -

結果

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -

仕様書	状態	備考
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}	{{Spec2('CSS3 Backgrounds')}}	初回定義
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}	{{Spec2('CSS4 Backgrounds')}}	`text` の値を追加。

- -

ブラウザーの互換性

- -

構文

値

公式定義

形式文法

例

例

HTML

CSS

結果

仕様書

ブラウザーの互換性

関連情報