From 9595be3220981263fcfc3bb7c5e111102ddaae7e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Oct 2021 12:36:07 +0900 Subject: CSS シェイプの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/basic-shape/index.html | 173 ---------------------- files/ja/web/css/basic-shape/index.md | 173 ++++++++++++++++++++++ files/ja/web/css/css_shapes/index.html | 98 ------------ files/ja/web/css/css_shapes/index.md | 98 ++++++++++++ files/ja/web/css/shape-image-threshold/index.html | 131 ---------------- files/ja/web/css/shape-image-threshold/index.md | 131 ++++++++++++++++ files/ja/web/css/shape-margin/index.html | 123 --------------- files/ja/web/css/shape-margin/index.md | 123 +++++++++++++++ 8 files changed, 525 insertions(+), 525 deletions(-) delete mode 100644 files/ja/web/css/basic-shape/index.html create mode 100644 files/ja/web/css/basic-shape/index.md delete mode 100644 files/ja/web/css/css_shapes/index.html create mode 100644 files/ja/web/css/css_shapes/index.md delete mode 100644 files/ja/web/css/shape-image-threshold/index.html create mode 100644 files/ja/web/css/shape-image-threshold/index.md delete mode 100644 files/ja/web/css/shape-margin/index.html create mode 100644 files/ja/web/css/shape-margin/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/basic-shape/index.html b/files/ja/web/css/basic-shape/index.html deleted file mode 100644 index 56b4c9da6e..0000000000 --- a/files/ja/web/css/basic-shape/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: -slug: Web/CSS/basic-shape -tags: - - CSS - - CSS シェイプ - - CSS データ型 - - リファレンス -translation_of: Web/CSS/basic-shape ---- -
{{CSSRef}}
- -

CSS の <basic-shape> データ型は、 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。

- -
{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}
- - - -

構文

- -

<basic-shape> データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。

- -

シェイプを作成するときは、 <basic-shape> の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、 X 座標が右方向、 Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。

- -

シェイプ関数

- -

以下のシェイプに対応しています。 <basic-shape> 値はすべて関数表記であり、 値定義構文で定義されます。

- -
-
inset()
-
- 
inset( <shape-arg>{1,4} [round <border-radius>]? )
- -

内部の長方形を定義します。

- -

最初の4つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定プロパティの構文に従い、1つ、2つ、4つの値で全四辺を設定することができます。

- -

<border-radius> の引数は省略可能で、 border-radius 一括指定プロパティの構文を使用して、内部の矩形の角の丸みを定義します。

- -

内部の矩形で2つの距離の組み合わせが、その軸の長さを超えていた場合（たとえば左右の距離がそれぞれ75％に設定された場合など）は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空のフロート領域を生成します。

-
-
circle()
-
- 
circle( [<shape-radius>]? [at <position>]? )
- -

引数 <shape-radius> はr、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して sqrt(width^2+height^2)/sqrt(2) としての割合になります。

- -

引数 {{cssxref("<position>")}} は円の中心を定義します。省略時は既定で中央になります。

-
-
ellipse()
-
- 
ellipse( [<shape-radius>{2}]? [at <position>]? )
- -

引数 <shape-radius> は、 rx と ry、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅（rx 値の場合）と高さ（ry 値の場合）に対する割合になります。

- -

引数 position は楕円の中心を定義します。省略時は既定で中央になります。

-
-
polygon()
-
- 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
- -

<fill-rule> は多角形の内部を決めるために使用される塗りつぶし規則を表します。指定可能な値は nonzero と evenodd です。省略時の既定値は nonzero です。

- -

それぞれの shape-arg の組における引数 xi と yi は、多角形の i 番目の頂点の座標を表します。

-
-
path()
-
- 
path( [<fill-rule>,]? <string>)
- -

省略可能な <fill-rule> は、パスの内部を決めるために使用される塗りつぶし規則を表します。指定可能な値は nonzero と evenodd です。省略時の既定値は nonzero です。

- -

必須の <string> は、引用符で囲まれた SVG Path です。

-
-
- -

上記で定義されていない引数は、以下のように定義されています。

- -
<shape-arg> = <length> | <percentage>
-<shape-radius> = <length> | <percentage> | closest-side | farthest-side
- -

円や楕円の半径を定義します。省略時の既定値は closest-side です。

- -

closest-side はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。

- -

farthest-side はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。

- -

基本シェイプの計算値

- -

<basic-shape> 関数での値は以下の例外を除けば、規定通りに計算されます。

- - - -

基本シェイプの補間

- -

 ある <basic-shape> と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("<length>")}}、 {{cssxref("<percentage>")}}、 {{cssxref("calc", "calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば（両方のリストの同じ位置に nonzero があった場合など）、それらの値は補間が行われます。

- - - -

例

- -

アニメーションする多角形

- -

この例では、 @keyframes @-規則を使用して、二つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。

- -

HTML

- -
<div></div>
- -

CSS

- -
div {
-  width: 300px;
-  height: 300px;
-  background: repeating-linear-gradient(red, orange 50px);
-  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
-  animation: 4s poly infinite alternate ease-in-out;
-  margin: 10px auto;
-}
-
-@keyframes poly {
-  from {
-    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
-  }
-
-  to {
-    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
-  }
-}
- -

結果

- -

{{EmbedLiveSample('Animated_polygon','340', '340')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}初回定義
- -

ブラウザーの対応

- -

{{Compat("css.types.basic-shape")}}

- -

関連情報

- - diff --git a/files/ja/web/css/basic-shape/index.md b/files/ja/web/css/basic-shape/index.md new file mode 100644 index 0000000000..56b4c9da6e --- /dev/null +++ b/files/ja/web/css/basic-shape/index.md @@ -0,0 +1,173 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS シェイプ + - CSS データ型 + - リファレンス +translation_of: Web/CSS/basic-shape +--- +
{{CSSRef}}
+ +

CSS の <basic-shape> データ型は、 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。

+ +
{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}
+ + + +

構文

+ +

<basic-shape> データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。

+ +

シェイプを作成するときは、 <basic-shape> の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、 X 座標が右方向、 Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。

+ +

シェイプ関数

+ +

以下のシェイプに対応しています。 <basic-shape> 値はすべて関数表記であり、 値定義構文で定義されます。

+ +
+
inset()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

内部の長方形を定義します。

+ +

最初の4つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定プロパティの構文に従い、1つ、2つ、4つの値で全四辺を設定することができます。

+ +

<border-radius> の引数は省略可能で、 border-radius 一括指定プロパティの構文を使用して、内部の矩形の角の丸みを定義します。

+ +

内部の矩形で2つの距離の組み合わせが、その軸の長さを超えていた場合（たとえば左右の距離がそれぞれ75％に設定された場合など）は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空のフロート領域を生成します。

+
+
circle()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

引数 <shape-radius> はr、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して sqrt(width^2+height^2)/sqrt(2) としての割合になります。

+ +

引数 {{cssxref("<position>")}} は円の中心を定義します。省略時は既定で中央になります。

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

引数 <shape-radius> は、 rx と ry、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅（rx 値の場合）と高さ（ry 値の場合）に対する割合になります。

+ +

引数 position は楕円の中心を定義します。省略時は既定で中央になります。

+
+
polygon()
+
+ 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+ +

<fill-rule> は多角形の内部を決めるために使用される塗りつぶし規則を表します。指定可能な値は nonzero と evenodd です。省略時の既定値は nonzero です。

+ +

それぞれの shape-arg の組における引数 xi と yi は、多角形の i 番目の頂点の座標を表します。

+
+
path()
+
+ 
path( [<fill-rule>,]? <string>)
+ +

省略可能な <fill-rule> は、パスの内部を決めるために使用される塗りつぶし規則を表します。指定可能な値は nonzero と evenodd です。省略時の既定値は nonzero です。

+ +

必須の <string> は、引用符で囲まれた SVG Path です。

+
+
+ +

上記で定義されていない引数は、以下のように定義されています。

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

円や楕円の半径を定義します。省略時の既定値は closest-side です。

+ +

closest-side はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。

+ +

farthest-side はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。

+ +

基本シェイプの計算値

+ +

<basic-shape> 関数での値は以下の例外を除けば、規定通りに計算されます。

+ +
    +
  • 省略された値は既定値として含められ計算されます。
    • +
  • circle() または ellipse() における {{cssxref("<position>")}} 値は、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした（水平と垂直）オフセットの組として計算されます。
    • +
  • inset() での <border-radius> 値は全8つの {{cssxref("length")}} またはパーセント値の展開リストとして計算されます。
    • +
+ +

基本シェイプの補間

+ +

 ある <basic-shape> と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("<length>")}}、 {{cssxref("<percentage>")}}、 {{cssxref("calc", "calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば（両方のリストの同じ位置に nonzero があった場合など）、それらの値は補間が行われます。

+ +
    +
  • どちらのシェイプも同じ参照ボックスを使う必要があります。
    • +
  • 両方のシェイプが同じ型で、型が ellipse() または circle() で、半径に closest-side または farthest-side のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。
    • +
  • 両方のシェイプの型が inset() の場合、シェイプ関数のそれぞれの値の間で補間が行われます。
    • +
  • 両方のシェイプの型が polygon() で、両方の多角形が同じ数の角を持っており、同じ <fill-rule> を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。
    • +
  • 両方のシェイプの型が path() の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。
    • +
  • それ以外の場合は補間が行われません。
    • +
+ +

例

+ +

アニメーションする多角形

+ +

この例では、 @keyframes @-規則を使用して、二つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}
+ +

結果

+ +

{{EmbedLiveSample('Animated_polygon','340', '340')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}初回定義
+ +

ブラウザーの対応

+ +

{{Compat("css.types.basic-shape")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_shapes/index.html b/files/ja/web/css/css_shapes/index.html deleted file mode 100644 index dcbe826a74..0000000000 --- a/files/ja/web/css/css_shapes/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: CSS シェイプ -slug: Web/CSS/CSS_Shapes -tags: - - CSS - - CSS シェイプ - - Reference - - wrapping - - シェイプ - - リファレンス - - 境界 - - 概要 -translation_of: Web/CSS/CSS_Shapes ---- -
{{CSSRef}}
- -

CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。 レベル１の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。

- -

基本的な例

- -

以下の例では、左に浮動状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。

- -

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

- -

リファレンス

- -

プロパティ

- -
-
    -
  • {{cssxref("shape-image-threshold")}}
    • -
  • {{cssxref("shape-margin")}}
    • -
  • {{cssxref("shape-outside")}}
    • -
-
- -

データ型

- -
-
    -
  • {{cssxref("<basic-shape>")}}
    • -
-
- -

ガイド

- - - -

外部リソース

- - - -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}初回定義。
- -

ブラウザーの対応

- -

shape-outside

- -

{{Compat("css.properties.shape-outside")}}

- -

shape-margin

- -

{{Compat("css.properties.shape-margin")}}

- -

shape-image-threshold

- -

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

diff --git a/files/ja/web/css/css_shapes/index.md b/files/ja/web/css/css_shapes/index.md new file mode 100644 index 0000000000..dcbe826a74 --- /dev/null +++ b/files/ja/web/css/css_shapes/index.md @@ -0,0 +1,98 @@ +--- +title: CSS シェイプ +slug: Web/CSS/CSS_Shapes +tags: + - CSS + - CSS シェイプ + - Reference + - wrapping + - シェイプ + - リファレンス + - 境界 + - 概要 +translation_of: Web/CSS/CSS_Shapes +--- +
{{CSSRef}}
+ +

CSS シェイプは、 CSS で使用する幾何学的な図形を記述します。 レベル１の仕様書では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。

+ +

基本的な例

+ +

以下の例では、左に浮動状態の画像を表示し、 shape-outside プロパティを circle(50%) の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

リファレンス

+ +

プロパティ

+ +
+
    +
  • {{cssxref("shape-image-threshold")}}
    • +
  • {{cssxref("shape-margin")}}
    • +
  • {{cssxref("shape-outside")}}
    • +
+
+ +

データ型

+ +
+
    +
  • {{cssxref("<basic-shape>")}}
    • +
+
+ +

ガイド

+ + + +

外部リソース

+ + + +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}初回定義。
+ +

ブラウザーの対応

+ +

shape-outside

+ +

{{Compat("css.properties.shape-outside")}}

+ +

shape-margin

+ +

{{Compat("css.properties.shape-margin")}}

+ +

shape-image-threshold

+ +

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

diff --git a/files/ja/web/css/shape-image-threshold/index.html b/files/ja/web/css/shape-image-threshold/index.html deleted file mode 100644 index 06a839dbed..0000000000 --- a/files/ja/web/css/shape-image-threshold/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: shape-image-threshold -slug: Web/CSS/shape-image-threshold -tags: - - Boundaries - - CSS - - CSS Property - - CSS Shapes - - Float Area - - Opacity - - Property - - Reference - - Shape - - 'recipe:css-property' - - shape-image-threshold -translation_of: Web/CSS/shape-image-threshold ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}
- - - -

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

- -

構文

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

値

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

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

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

- -

HTML

- -
<div id="gradient-shape"></div>
-
-<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
-  adipisci, libero quae nihil porro debitis laboriosam inventore animi
-  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
-  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
-  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
-  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

- -
#gradient-shape {
-  width: 150px;
-  height: 150px;
-  float: left;
-  background-image: linear-gradient(30deg, black, transparent 80%,
-      transparent);
-  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")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/shape-image-threshold/index.md b/files/ja/web/css/shape-image-threshold/index.md new file mode 100644 index 0000000000..06a839dbed --- /dev/null +++ b/files/ja/web/css/shape-image-threshold/index.md @@ -0,0 +1,131 @@ +--- +title: shape-image-threshold +slug: Web/CSS/shape-image-threshold +tags: + - Boundaries + - CSS + - CSS Property + - CSS Shapes + - Float Area + - Opacity + - Property + - Reference + - Shape + - 'recipe:css-property' + - shape-image-threshold +translation_of: Web/CSS/shape-image-threshold +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}
+ + + +

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

+ +

構文

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

値

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

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

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

+ +

HTML

+ +
<div id="gradient-shape"></div>
+
+<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
+  adipisci, libero quae nihil porro debitis laboriosam inventore animi
+  impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque
+  a mollitia dicta repudiandae illum exercitationem aliquam repellendus
+  ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto
+  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

+ +
#gradient-shape {
+  width: 150px;
+  height: 150px;
+  float: left;
+  background-image: linear-gradient(30deg, black, transparent 80%,
+      transparent);
+  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")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/css/shape-margin/index.html b/files/ja/web/css/shape-margin/index.html deleted file mode 100644 index 9b46e2aff7..0000000000 --- a/files/ja/web/css/shape-margin/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: shape-margin -slug: Web/CSS/shape-margin -tags: - - CSS - - CSS シェイプ - - CSS プロパティ - - Reference - - float - - margin - - shape-margin - - シェイプ - - プロパティ - - 境界 - - 浮動領域 -translation_of: Web/CSS/shape-margin ---- -
{{CSSRef}}
- -

CSS の shape-margin プロパティは、 {{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。

- -
{{EmbedInteractiveExample("pages/css/shape-margin.html")}}
- - - -

マージンで、シェイプ (浮動要素) の縁と周囲のコンテンツとの間隔を調整することができます。

- -

構文

- -
/* <length> 値 */
-shape-margin: 10px;
-shape-margin: 20mm;
-
-/* <percentage> 値 */
-shape-margin: 60%;
-
-/* グローバル値 */
-shape-margin: inherit;
-shape-margin: initial;
-shape-margin: unset;
-
- -

値

- -
-
<length-percentage>
-
シェイプのマージンを {{cssxref("<length>")}} 値又は要素の内包ブロックの幅に対する {{cssxref("<percentage>")}} で設定します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<section>
-<div class="shape"></div>
-We are not quite sure of any one thing in biology; our knowledge of geology
-is relatively very slight, and the economic laws of society are
-uncertain to every one except some individual who attempts to set them
-forth; but before the world was fashioned the square on the hypotenuse
-was equal to the sum of the squares on the other two sides of a right
-triangle, and it will be so after this world is dead; and the inhabitant
-of Mars, if he exists, probably knows its truth as we know it.</section>
- -

CSS

- -
section {
-  max-width: 400px;
-}
-
-.shape {
-  float: left;
-  width: 150px;
-  height: 150px;
-  background-color: maroon;
-  clip-path: polygon(0 0, 150px 150px, 0 150px);
-  shape-outside: polygon(0 0, 150px 150px, 0 150px);
-  shape-margin: 20px;
-}
- -

結果

- -

{{EmbedLiveSample("Example", 500, 250)}}

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -
-

{{Compat("css.properties.shape-margin")}}

-
- -

関連情報

- - diff --git a/files/ja/web/css/shape-margin/index.md b/files/ja/web/css/shape-margin/index.md new file mode 100644 index 0000000000..9b46e2aff7 --- /dev/null +++ b/files/ja/web/css/shape-margin/index.md @@ -0,0 +1,123 @@ +--- +title: shape-margin +slug: Web/CSS/shape-margin +tags: + - CSS + - CSS シェイプ + - CSS プロパティ + - Reference + - float + - margin + - shape-margin + - シェイプ + - プロパティ + - 境界 + - 浮動領域 +translation_of: Web/CSS/shape-margin +--- +
{{CSSRef}}
+ +

CSS の shape-margin プロパティは、 {{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。

+ +
{{EmbedInteractiveExample("pages/css/shape-margin.html")}}
+ + + +

マージンで、シェイプ (浮動要素) の縁と周囲のコンテンツとの間隔を調整することができます。

+ +

構文

+ +
/* <length> 値 */
+shape-margin: 10px;
+shape-margin: 20mm;
+
+/* <percentage> 値 */
+shape-margin: 60%;
+
+/* グローバル値 */
+shape-margin: inherit;
+shape-margin: initial;
+shape-margin: unset;
+
+ +

値

+ +
+
<length-percentage>
+
シェイプのマージンを {{cssxref("<length>")}} 値又は要素の内包ブロックの幅に対する {{cssxref("<percentage>")}} で設定します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<section>
+<div class="shape"></div>
+We are not quite sure of any one thing in biology; our knowledge of geology
+is relatively very slight, and the economic laws of society are
+uncertain to every one except some individual who attempts to set them
+forth; but before the world was fashioned the square on the hypotenuse
+was equal to the sum of the squares on the other two sides of a right
+triangle, and it will be so after this world is dead; and the inhabitant
+of Mars, if he exists, probably knows its truth as we know it.</section>
+ +

CSS

+ +
section {
+  max-width: 400px;
+}
+
+.shape {
+  float: left;
+  width: 150px;
+  height: 150px;
+  background-color: maroon;
+  clip-path: polygon(0 0, 150px 150px, 0 150px);
+  shape-outside: polygon(0 0, 150px 150px, 0 150px);
+  shape-margin: 20px;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", 500, 250)}}

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの互換性

+ +
+

{{Compat("css.properties.shape-margin")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf