From a5244332483ce91b0be09cc7a6ef057a8d37884f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Oct 2021 22:04:24 +0900 Subject: CSS シェイプ関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/09 時点の英語版に同期 --- files/ja/web/css/shape-image-threshold/index.md | 138 +++++++++++------------- 1 file changed, 61 insertions(+), 77 deletions(-) (limited to 'files/ja/web/css/shape-image-threshold/index.md') diff --git a/files/ja/web/css/shape-image-threshold/index.md b/files/ja/web/css/shape-image-threshold/index.md index 06a839dbed..cc22c46709 100644 --- a/files/ja/web/css/shape-image-threshold/index.md +++ b/files/ja/web/css/shape-image-threshold/index.md @@ -2,66 +2,66 @@ title: shape-image-threshold slug: Web/CSS/shape-image-threshold tags: - - Boundaries + - 境界 - CSS - - CSS Property - - CSS Shapes - - Float Area + - CSS プロパティ + - CSS シェイプ + - 浮動領域 - Opacity - - Property + - プロパティ - Reference - - Shape - - 'recipe:css-property' + - シェイプ + - recipe:css-property - shape-image-threshold +browser-compat: css.properties.shape-image-threshold translation_of: Web/CSS/shape-image-threshold --- -
{{CSSRef}}
+{{CSSRef}} -

shape-image-threshold は CSS のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。

+**`shape-image-threshold`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像によってシェイプを抽出するために使用するアルファチャネルのしきい値を設定します。 -
{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}
+{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}} - +アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 `0.5` の値は不透過度が 50% よりも大きいピクセルをすべて含めた図形になるという意味です。 -

アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 0.5 の値は不透過度が50%よりも大きいピクセルをすべて含めた図形になるという意味です。

+## 構文 -

構文

- -
/* <number> 値 */
+```css
+/*  値 */
 shape-image-threshold: 0.7;
 
 /* グローバル値 */
 shape-image-threshold: inherit;
 shape-image-threshold: initial;
+shape-image-threshold: revert;
 shape-image-threshold: unset;
-
+``` -

値

+### 値 -
-
{{cssxref("<alpha-value>")}}
-
画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。
-
+- {{cssxref("<alpha-value>")}} + - : 画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{CSSInfo}} -

形式文法

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

例

+## 例 -

グラデーションへのテキストの配置

+

グラデーションへのテキストの配置

-

この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは shape-outside を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。

+この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは `shape-outside` を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。 -

HTML

+#### HTML -
<div id="gradient-shape"></div>
+```html
+

 
-<p>
+

   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi
   voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint
   facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat
@@ -72,11 +72,13 @@ shape-image-threshold: unset;
   nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit
   accusamus iusto dolore, at provident eius alias maxime pariatur non
   deleniti ipsum sequi rem eveniet laboriosam magni expedita?
-</p>
+

+``` -

CSS

+#### CSS -
#gradient-shape {
+```css
+#gradient-shape {
   width: 150px;
   height: 150px;
   float: left;
@@ -85,47 +87,29 @@ shape-image-threshold: unset;
   shape-outside: linear-gradient(30deg, black, transparent 80%,
       transparent);
   shape-image-threshold: 0.2;
-}
- -

シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。

- -

シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 shape-image-threadhold の値を 0.2 にして使用して作成しています。

- -

結果

- -

{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}{{Spec2('CSS Shapes')}}初回定義
- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.shape-image-threshold")}}

-
- -

関連情報

- - +} +``` + +シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。 + +シェイプの部分として扱うグラデーション内のピクセルは 20% の不透過度がしきい値なので、 `shape-image-threadhold` の値を `0.2` にして使用して作成しています。 + +#### 結果 + +{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS シェイプ](/ja/docs/Web/CSS/CSS_Shapes) +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- {{cssxref("<basic-shape>")}} +- {{cssxref("shape-outside")}} +- {{cssxref("shape-margin")}} -- cgit v1.2.3-54-g00ecf