diff options
| -rw-r--r-- | files/ja/web/css/basic-shape/circle()/index.md | 59 | ||||
| -rw-r--r-- | files/ja/web/css/basic-shape/ellipse()/index.md | 67 | ||||
| -rw-r--r-- | files/ja/web/css/basic-shape/index.md | 205 | ||||
| -rw-r--r-- | files/ja/web/css/basic-shape/inset()/index.md | 51 | ||||
| -rw-r--r-- | files/ja/web/css/basic-shape/polygon()/index.md | 51 | ||||
| -rw-r--r-- | files/ja/web/css/css_shapes/index.md | 107 | ||||
| -rw-r--r-- | files/ja/web/css/shape-image-threshold/index.md | 138 | ||||
| -rw-r--r-- | files/ja/web/css/shape-margin/index.md | 131 | ||||
| -rw-r--r-- | files/ja/web/css/shape-outside/index.md | 175 |
9 files changed, 663 insertions, 321 deletions
diff --git a/files/ja/web/css/basic-shape/circle()/index.md b/files/ja/web/css/basic-shape/circle()/index.md new file mode 100644 index 0000000000..5c1b236415 --- /dev/null +++ b/files/ja/web/css/basic-shape/circle()/index.md @@ -0,0 +1,59 @@ +--- +title: circle() +slug: Web/CSS/basic-shape/circle() +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - circle + - CSS 関数 + - データ型 + - Reference +browser-compat: css.types.basic-shape.circle +translation_of: Web/CSS/basic-shape/circle() +--- +{{CSSRef}} + +**`circle()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: circle(50%); +clip-path: circle(6rem at 12rem 8rem); +``` + +### 値 + +- `<shape-radius>` + + - : {{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。 + +- `<position>` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な円 + +下の例では、{{cssxref("shape-outside")}} プロパティの値が `circle(50%)` となっており、浮動要素に円を定義して、テキストが回り込むようになっています。 + +{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/ellipse()/index.md b/files/ja/web/css/basic-shape/ellipse()/index.md new file mode 100644 index 0000000000..54b5f5b6b4 --- /dev/null +++ b/files/ja/web/css/basic-shape/ellipse()/index.md @@ -0,0 +1,67 @@ +--- +title: ellipse() +slug: Web/CSS/basic-shape/ellipse() +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - ellipse + - CSS 関数 + - データ型 + - Reference +browser-compat: css.types.basic-shape.ellipse +translation_of: Web/CSS/basic-shape/ellipse() +--- +{{CSSRef}} + +**`ellipse()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +shape-outside: ellipse(40% 50% at left); +shape-outside: ellipse(closest-side farthest-side at 30%); +``` + +楕円は基本的に円を潰したものなので、`ellipse()` は、2 つの半径 x と y を指定しなければならないことを除けば、 {{cssxref("basic-shape/circle()","circle()")}} とよく似た方法で動作します。 + +### 値 + +- `<shape-radius>` + + - : 2 つの半径で、x および y をその順で指定します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `closest-side` および `farthest-side` の値の何れかです。 + + - `closest-side` + - : シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。楕円の場合は、半径の軸で最も近い辺となります。 + - `farthest-side` + - : シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。楕円の場合は、半径の軸で最も遠い辺となります。 + +- `<position>` + - : 円の中心を移動します。{{cssxref("length")}}、{{cssxref("percentage")}}、または `left` のような値の何れかです。 + +## 例 + +### 基本的な ellipse() の例 + +この例では、x 半径が 40%、y 半径が 50%、位置が左の楕円を示しています。これは、楕円の中心がボックスの左端にあることを意味しており、テキストを回り込ませるための半楕円の形になります。これらの値を変更すると、楕円の変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} + +### closest-side / farthest-side の値の使用 + +キーワード値の `closest-side` と `farthest-side` は、浮動要素の参照ボックスの大きさに基づいて、素早く楕円を作成するのに便利です。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/index.md b/files/ja/web/css/basic-shape/index.md index 56b4c9da6e..d91d5c180a 100644 --- a/files/ja/web/css/basic-shape/index.md +++ b/files/ja/web/css/basic-shape/index.md @@ -8,118 +8,138 @@ tags: - リファレンス translation_of: Web/CSS/basic-shape --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p> <a href="/ja/docs/Web/CSS">CSS</a> の <strong><code><basic-shape></code></strong> <a href="/ja/docs/Web/CSS/CSS_Types">データ型</a>は、 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。</p> +**`<basic-shape>`** は [CSS](/ja/docs/Web/CSS) の[データ型](/ja/docs/Web/CSS/CSS_Types)で、{{cssxref("clip-path")}}、{{cssxref("shape-outside")}}、{{cssxref("offset-path")}} の各プロパティで使用されるシェイプを表します。 -<div>{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}</div> +{{EmbedInteractiveExample("pages/css/type-basic-shape.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> +`<basic-shape>` データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。 -<p><code><basic-shape></code> データ型は、以下に挙げた基本シェイプ関数のうちの一つで定義します。</p> +シェイプを作成するときは、 `<basic-shape>` の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、X 座標が右方向、Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。 -<p>シェイプを作成するときは、 <code><basic-shape></code> の値を使用するそれぞれのプロパティで参照ボックスを定義します。シェイプの座標系は参照ボックスの左上隅が原点で、 X 座標が右方向、 Y 座標が下方向になります。パーセント値で表現された長さはすべて、参照ボックスの寸法を使用して算出されます。</p> +既定の参照ボックスは `margin-box` であり、`shape-outside: circle(50%)` を使用して円を生成すると下記のようになります。形状はマージンボックスを参照して定義されています。 -<h3 id="Shape_functions" name="Shape_functions">シェイプ関数</h3> + -<p>以下のシェイプに対応しています。 <code><basic-shape></code> 値はすべて関数表記であり、 <a href="/ja/docs/Web/CSS/Value_definition_syntax">値定義構文</a>で定義されます。</p> +### シェイプ関数 -<dl> - <dt><code><a id="inset()" name="inset()"></a>inset()</code></dt> - <dd> - <pre class="syntaxbox"><code>inset( <shape-arg>{1,4} [round <border-radius>]? )</code></pre> +以下のシェイプに対応しています。`<basic-shape>` 値はすべて関数表記であり、[値定義構文](/ja/docs/Web/CSS/Value_definition_syntax)で定義されます。 - <p>内部の長方形を定義します。</p> +- `{{cssxref("basic-shape/inset()","inset()")}}` - <p>最初の4つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定プロパティの構文に従い、1つ、2つ、4つの値で全四辺を設定することができます。</p> + - : 内部の長方形を定義します。 - <p><a href="/ja/docs/Web/CSS/border-radius"><code><border-radius></code></a> の引数は省略可能で、 border-radius 一括指定プロパティの構文を使用して、内部の矩形の角の丸みを定義します。</p> + ```css + inset( <shape-arg>{1,4} [round <border-radius>]? ) + ``` - <p>内部の矩形で2つの距離の組み合わせが、その軸の長さを超えていた場合（たとえば左右の距離がそれぞれ75％に設定された場合など）は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空のフロート領域を生成します。</p> - </dd> - <dt><code><a id="circle()" name="circle()"></a>circle()</code></dt> - <dd> - <pre class="syntaxbox"><code>circle( [<shape-radius>]? [at <position>]? )</code></pre> + 最初の 4 つの引数が与えられたときは、参照ボックス内部のそれぞれ上、右、下、左からみた、内部の矩形における各辺の位置を定義するオフセットを表します。これらの引数は margin 一括指定の構文に従い、1 つ、2 つ、4 つの値で全四辺を設定することができます。 - <p>引数 <code><shape-radius></code> は<em>r</em>、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して <code>sqrt(width^2+height^2)/sqrt(2)</code> としての割合になります。</p> + 任意の [`<border-radius>`](/ja/docs/Web/CSS/border-radius) の引数は省略可能で、 border-radius 一括指定の構文を使用して、内部の矩形の角の丸みを定義します。 - <p>引数 {{cssxref("<position>")}} は円の中心を定義します。省略時は既定で中央になります。</p> - </dd> - <dt><code><a id="ellipse()" name="ellipse()"></a>ellipse()</code></dt> - <dd> - <pre class="syntaxbox"><code>ellipse( [<shape-radius>{2}]? [at <position>]? )</code></pre> + 内部の矩形で 2 つの距離の組み合わせが、その軸の長さを超えていた場合 (たとえば左右の距離がそれぞれ 75% に設定された場合など) は、何も領域を囲まないシェイプを定義します。この仕様書によれば、これは空の浮動領域を生成します。 - <p>引数 <code><shape-radius></code> は、 r<sub>x</sub> と r<sub>y</sub>、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅（r<sub>x</sub> 値の場合）と高さ（r<sub>y</sub> 値の場合）に対する割合になります。</p> +- `{{cssxref("basic-shape/circle()","circle()")}}` - <p>引数 position は楕円の中心を定義します。省略時は既定で中央になります。</p> - </dd> - <dt><code><a id="polygon()" name="polygon()"></a>polygon()</code></dt> - <dd> - <pre class="syntaxbox"><code>polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )</code></pre> + - : 半径と位置を使用して円を定義します。 - <p><code><fill-rule></code> は多角形の内部を決めるために使用される<a href="/ja/docs/Web/SVG/Attribute/fill-rule">塗りつぶし規則</a>を表します。指定可能な値は <code>nonzero</code> と <code>evenodd</code> です。省略時の既定値は <code>nonzero</code> です。</p> + ```css + circle( [<shape-radius>]? [at <position>]? ) + ``` - <p>それぞれの shape-arg の組における引数 <em>x<sub>i</sub></em> と <em>y<sub>i</sub></em> は、多角形の i 番目の頂点の座標を表します。</p> - </dd> - <dt><code><a id="path()" name="path()"></a>path()</code></dt> - <dd> - <pre class="syntaxbox"><code>path( [<fill-rule>,]? <string>)</code></pre> + 引数 `<shape-radius>` は _r_、つまり円の半径を表します。負の数は無効です。ここでパーセント値を指定すると、参照ボックスの幅と高さを使用して `sqrt(width^2+height^2)/sqrt(2)` としての割合になります。 - <p>省略可能な <code><fill-rule></code> は、パスの内部を決めるために使用される<a href="/ja/docs/Web/SVG/Attribute/fill-rule">塗りつぶし規則</a>を表します。指定可能な値は <code>nonzero</code> と <code>evenodd</code> です。省略時の既定値は <code>nonzero</code> です。</p> + 引数 {{cssxref("<position>")}} は円の中心を定義します。省略時は既定で中央になります。 - <p>必須の <string> は、引用符で囲まれた <a href="/ja/docs/SVG/Attribute/d">SVG Path</a> です。</p> - </dd> -</dl> +- `{{cssxref("basic-shape/ellipse()","ellipse()")}}` -<p>上記で定義されていない引数は、以下のように定義されています。</p> + - : 2 つの半径と位置を使用して楕円を定義します。 -<pre class="syntaxbox"><code><shape-arg> = <length> | <percentage> -<shape-radius> = <length> | <percentage> | closest-side | farthest-side</code></pre> + ```css + ellipse( [<shape-radius>{2}]? [at <position>]? ) + ``` -<p>円や楕円の半径を定義します。省略時の既定値は <code>closest-side</code> です。</p> + 引数 `<shape-radius>` は、rx と ry、つまり楕円の横半径と縦半径を、この順で表します。どちらの半径も負の値は無効です。ここでパーセント値を指定すると、参照ボックスの幅 (rx 値の場合) と高さ (ry 値の場合) に対する割合になります。 -<p><code>closest-side</code> はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。</p> + 引数 position は楕円の中心を定義します。省略時は既定で中央になります。 -<p><code>farthest-side</code> はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。</p> +- `{{cssxref("basic-shape/polygon()","polygon()")}}` -<h2 id="Computed_values_of_basic_shapes" name="Computed_values_of_basic_shapes">基本シェイプの計算値</h2> + - : SVG の {{SVGAttr("fill-rule")}} と一連の頂点を使用して多角形を定義します。 -<p><code><basic-shape></code> 関数での値は以下の例外を除けば、規定通りに計算されます。</p> + ```css + polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# ) + ``` -<ul> - <li>省略された値は既定値として含められ計算されます。</li> - <li><code>circle()</code> または <code>ellipse()</code> における {{cssxref("<position>")}} 値は、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした（水平と垂直）オフセットの組として計算されます。</li> - <li><code>inset()</code> での <a href="/ja/docs/Web/CSS/border-radius"><code><border-radius></code></a> 値は全8つの {{cssxref("length")}} またはパーセント値の展開リストとして計算されます。</li> -</ul> + `<fill-rule>` は多角形の内部を決めるために使用される塗りつぶし規則 ({{SVGAttr("fill-rule")}}) を表します。指定可能な値は `nonzero` と `evenodd` です。省略時の既定値は `nonzero` です。 -<h2 id="Interpolation_of_basic_shapes" name="Interpolation_of_basic_shapes">基本シェイプの補間</h2> + リスト内にある引数の組は、 _xi_ および _yi_ すなわち多角形の i 番目の頂点の X 座標と Y 座標を表します。 -<p> ある <code><basic-shape></code> と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("<length>")}}、 {{cssxref("<percentage>")}}、 {{cssxref("calc", "calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば（両方のリストの同じ位置に <code>nonzero</code> があった場合など）、それらの値は補間が行われます。</p> +- `path()` -<ul> - <li>どちらのシェイプも同じ参照ボックスを使う必要があります。</li> - <li>両方のシェイプが同じ型で、型が <code>ellipse()</code> または <code>circle()</code> で、半径に <code>closest-side</code> または <code>farthest-side</code> のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li> - <li>両方のシェイプの型が <code>inset()</code> の場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li> - <li>両方のシェイプの型が <code>polygon()</code> で、両方の多角形が同じ数の角を持っており、同じ <code><fill-rule></code> を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。</li> - <li>両方のシェイプの型が <code>path()</code> の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。</li> - <li>それ以外の場合は補間が行われません。</li> -</ul> + - : SVG の {{SVGAttr("fill-rule")}} と SVG の[パス定義](/ja/docs/Web/SVG/Attribute/d)を使用してシェイプを定義します。 -<h2 id="Examples" name="Examples">例</h2> + ```css + path( [<fill-rule>,]? <string>) + ``` -<h3 id="Animated_polygon" name="Animated_polygon">アニメーションする多角形</h3> + 省略可能な `<fill-rule>` は多角形の内部を決めるために使用される塗りつぶし規則 ({{SVGAttr("fill-rule")}}) を表します。指定可能な値は `nonzero` と `evenodd` です。省略時の既定値は `nonzero` です。 -<p>この例では、 <a href="/ja/docs/Web/CSS/@keyframes">@keyframes</a> @-規則を使用して、二つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。</p> + 必須の \<string> は、引用符で囲まれた [SVG パス](/ja/docs/Web/SVG/Attribute/d)です。 -<h4 id="HTML">HTML</h4> +上記で定義されていない引数は、以下のように定義されています。 -<pre class="brush: html"><div></div></pre> +```css +<shape-arg> = <length> | <percentage> +<shape-radius> = <length> | <percentage> | closest-side | farthest-side +``` -<h4 id="CSS">CSS</h4> +円や楕円の半径を定義します。省略時の既定値は `closest-side` です。 -<pre class="brush: css">div { +`closest-side` はシェイプの中心から参照ボックスの最も近い辺までの距離を使用します。円の場合、これはあらゆる方向で最も近い辺です。楕円の場合、その軸で最も近い辺です。 + +`farthest-side` はシェイプの中心から参照ボックスの最も遠い辺までの距離を使用します。円の場合、これはあらゆる方向で最も遠い辺です。楕円の場合、その軸で最も遠い辺です。 + +## 解説 + +### 基本シェイプの計算値 + +`<basic-shape>` 関数の中の値は、以下の例外を除けば、規定通りに計算されます。 + +- 省略された値は既定値として含められ計算されます。 +- {{cssxref("<position>")}} 値が `circle()` または `ellipse()` で使用されると、それぞれを絶対的な長さやパーセント値で指定し、左上を原点とした (水平と垂直) オフセットの組として計算されます。 +- [`<border-radius>`](/ja/docs/Web/CSS/border-radius) が `inset()` で使用されると、全 8 つの {{cssxref("length")}} またはパーセント値のリストとして展開され計算されます。 + +### 基本シェイプの補間 + +ある `<basic-shape>` と他のものの間でアニメーションが行われるとき、以下の規則が適用されます。シェイプ関数の中の値は単なるリストとして補間が行われます。リストの値は可能であれば {{cssxref("<length>")}}、 {{cssxref("<percentage>")}}、 {{cssxref("calc()")}} として補間されます。リストの値がこれらの型以外で同じであれば、それらの値は補間が行われます。 + +- どちらのシェイプも同じ参照ボックスを使う必要があります。 +- 両方のシェイプが同じ型で、型が `ellipse()` または `circle()` で、半径に `closest-side` または `farthest-side` のキーワードが使われていない場合、シェイプ関数のそれぞれの値の間で補間が行われます。 +- 両方のシェイプの型が `inset()` の場合、シェイプ関数のそれぞれの値の間で補間が行われます。 +- 両方のシェイプの型が `polygon()` で、両方の多角形が同じ数の角を持っており、同じ `<fill-rule>` を使用している場合、シェイプ関数のそれぞれの値の間で補間が行われます。 +- 両方のシェイプの型が `path()` の場合、両方の文字列が同じ数でパスデータコマンドの型が同じ順序であれば、実数でそれぞれのパスデータコマンドが補間されます。 +- それ以外の場合は補間が行われません。 + +## 例 + +<h3 id="Animated_polygon">アニメーションする多角形</h3> + +この例では、[@keyframes](/ja/docs/Web/CSS/@keyframes) アットルールを使用して、2 つの多角形の間でクリップパスをアニメーションします。なお、どちらの多角形も同じ数の角を持つことが、この種のアニメーションが動作するために必要です。 + +#### HTML + +```html +<div></div> +``` + +#### CSS + +```css +div { width: 300px; height: 300px; background: repeating-linear-gradient(red, orange 50px); @@ -136,38 +156,23 @@ translation_of: Web/CSS/basic-shape to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); } -}</pre> +} +``` -<h4 id="Result" name="Result">結果</h4> +#### 結果 -<p>{{EmbedLiveSample('Animated_polygon','340', '340')}}</p> +{{EmbedLiveSample('Animated_polygon','340', '340')}} -<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('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}</td> - <td>{{ Spec2('CSS Shapes') }}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの対応</h2> +## ブラウザーの互換性 -<p>{{Compat("css.types.basic-shape")}}</p> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}</li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Edit Shape Paths in CSS — Firefox Developer Tools</a></li> -</ul> +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [CSS シェイプのパスを編集する — Firefox 開発者ツール](/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes) +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) diff --git a/files/ja/web/css/basic-shape/inset()/index.md b/files/ja/web/css/basic-shape/inset()/index.md new file mode 100644 index 0000000000..7afdcbb0eb --- /dev/null +++ b/files/ja/web/css/basic-shape/inset()/index.md @@ -0,0 +1,51 @@ +--- +title: inset() +slug: Web/CSS/basic-shape/inset() +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - inset + - CSS 関数 + - データ型 + - Reference +browser-compat: css.types.basic-shape.inset +translation_of: Web/CSS/basic-shape/inset() +--- +{{CSSRef}} + +**`inset()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。内部の矩形を定義します。 + +## 構文 + +```css +shape-outside: inset(20px 50px 10px 0 round 50px); +``` + +### 値 + +- `<length-percentage>{1,4}` + - : 4 つの引数がすべて与えられた場合、参照ボックスの内側に向けた上、右、下、左のオフセットを表し、内部の矩形の辺の位置を定義します。これらの引数は margin 一括指定の構文に従っており、4 つの内側の位置すべてに 1 つ、2 つ、または 4 つの値を設定することができます。 +- `<border-radius>` + - : オプションの [`<border-radius>`](/ja/docs/Web/CSS/border-radius) 引数は、 border-radius 一括指定の構文を使用して内部の矩形の角の丸みを定義します。 + +## 例 + +### 基本的な内側の矩形の例 + +下記の例では、浮動要素の上にコンテンツを引き寄せるために、`inset()` のシェイプを使用しています。オフセット値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/basic-shape/polygon()/index.md b/files/ja/web/css/basic-shape/polygon()/index.md new file mode 100644 index 0000000000..9a2df5b4d0 --- /dev/null +++ b/files/ja/web/css/basic-shape/polygon()/index.md @@ -0,0 +1,51 @@ +--- +title: polygon() +slug: Web/CSS/basic-shape/polygon() +tags: + - CSS + - CSS データ型 + - CSS シェイプ + - polygon + - CSS 関数 + - データ型 + - Reference +browser-compat: css.types.basic-shape.polygon +translation_of: Web/CSS/basic-shape/polygon() +--- +{{CSSRef}} + +**`polygon()`** は [CSS](/ja/docs/Web/CSS) の関数で、{{cssxref("<basic-shape>")}} [データ型](/ja/docs/Web/CSS/CSS_Types)の一つです。 + +## 構文 + +```css +clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%); +``` + +### 値 + +- `<fill-rule>` + - : オプションで `nonzero` (省略時の既定値) または `evenodd` のどちらかであり、[塗りつぶしルール](/ja/docs/Web/SVG/Attribute/fill-rule)を指定します。 +- `[<length-percentage><length-percentage>]#` + - : 3 組以上の値です (多角形は少なくとも三角形を描く必要があります)。これらの値は、リファレンスボックスを基準にして描かれる座標です。 + +## 例 + +### 基本的な polygon() の例 + +この例では、`polygon()` を使って、テキストを回り込ませるシェイプを作成しています。値を変更するとシェイプの変化を確認することができます。 + +{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このデータ型を使用するプロパティ: {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} +- [基本シェイプのガイド](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) diff --git a/files/ja/web/css/css_shapes/index.md b/files/ja/web/css/css_shapes/index.md index dcbe826a74..bd44523b5c 100644 --- a/files/ja/web/css/css_shapes/index.md +++ b/files/ja/web/css/css_shapes/index.md @@ -2,97 +2,58 @@ title: CSS シェイプ slug: Web/CSS/CSS_Shapes tags: + - 境界 - CSS - CSS シェイプ + - ガイド + - 概要 - Reference - - wrapping - シェイプ - - リファレンス - - 境界 - - 概要 + - wrapping translation_of: Web/CSS/CSS_Shapes --- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong>CSS シェイプ</strong>は、 CSS で使用する幾何学的な図形を記述します。 <a href="https://drafts.csswg.org/css-shapes/">レベル１の仕様書</a>では、 CSS シェイプは浮動状態の要素に適用されます。</span>仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。</p> - -<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2> - -<p>以下の例では、左に浮動状態の画像を表示し、 <code>shape-outside</code> プロパティを <code>circle(50%)</code> の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。</p> - -<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p> - -<h2 id="Reference" name="Reference">リファレンス</h2> - -<h3 id="Properties" name="Properties">プロパティ</h3> - -<div class="index"> -<ul> - <li>{{cssxref("shape-image-threshold")}}</li> - <li>{{cssxref("shape-margin")}}</li> - <li>{{cssxref("shape-outside")}}</li> -</ul> -</div> +{{CSSRef}} -<h3 id="Data_types" name="Data_types">データ型</h3> +**CSS シェイプ**は、 CSS で使用する幾何学的な図形を記述します。[レベル 1 の仕様書](https://drafts.csswg.org/css-shapes/)では、 CSS シェイプは浮動状態の要素に適用されます。仕様書では浮動状態の要素においてシェイプを定義する様々な方法を定義しており、コンテンツの折り返し線が要素ボックスの矩形に従うのではなく、図形に回り込むようになります。 -<div class="index"> -<ul> - <li>{{cssxref("<basic-shape>")}}</li> -</ul> -</div> +## 基本的な例 -<h2 id="Guides" name="Guides">ガイド</h2> +以下の例では、左に浮動状態の画像を表示し、`shape-outside` プロパティを `circle(50%)` の値で適用しています。これは円形を作成し、浮動状態の要素で折り返すコンテンツが図形に回り込むようになります。これにより、テキストの行ボックスが折り返す長さが変わります。 -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">ボックス値からのシェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">基本シェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">画像からのシェイプ</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">CSS でのシェイプのパスの編集 — Firefox 開発ツール</a></li> -</ul> +{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} -<h2 id="外部リソース">外部リソース</h2> +## リファレンス -<ul> - <li><a href="https://codepen.io/KristopherVanSant/post/css-shapes-resources">A list of CSS Shapes resources</a></li> - <li><a href="https://alistapart.com/article/css-shapes-101">CSS Shapes 101</a></li> - <li><a href="https://www.sarasoueidan.com/blog/css-shapes/">Creating non-rectangular layouts with CSS Shapes</a></li> - <li><a href="https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498">How To Use CSS Shapes In Your Web Design</a></li> - <li><a href="https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/">How To Get Started With CSS Shapes</a></li> - <li><a href="https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5">What I Learned In One Weekend With CSS Shapes</a></li> - <li><a href="https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/">CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components</a></li> -</ul> +### プロパティ -<h2 id="Specifications" name="Specifications">仕様書</h2> +- {{cssxref("shape-image-threshold")}} +- {{cssxref("shape-margin")}} +- {{cssxref("shape-outside")}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS Shapes")}}</td> - <td>{{Spec2("CSS Shapes")}}</td> - <td>初回定義。</td> - </tr> - </tbody> -</table> +### データ型 -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +- {{cssxref("<basic-shape>")}} -<h3 id="shape-outside">shape-outside</h3> +## ガイド -<p>{{Compat("css.properties.shape-outside")}}</p> +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- [ボックス値からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/From_box_values) +- [基本シェイプ](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) +- [画像からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images) +- [CSS でのシェイプのパスの編集 — Firefox 開発ツール](/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes) -<h3 id="shape-margin">shape-margin</h3> +## 外部リソース -<p>{{Compat("css.properties.shape-margin")}}</p> +- [A list of CSS Shapes resources](https://codepen.io/KristopherVanSant/post/css-shapes-resources) +- [CSS Shapes 101](https://alistapart.com/article/css-shapes-101) +- [Creating non-rectangular layouts with CSS Shapes](https://www.sarasoueidan.com/blog/css-shapes/) +- [How To Use CSS Shapes In Your Web Design](https://webdesign.tutsplus.com/tutorials/how-to-use-css-shapes-in-your-web-design--cms-27498) +- [How To Get Started With CSS Shapes](https://www.webdesignerdepot.com/2015/03/how-to-get-started-with-css-shapes/) +- [What I Learned In One Weekend With CSS Shapes](https://medium.com/@MHarreither/what-i-learned-in-one-weekend-with-css-shapes-66ae9be69cc5) +- [CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components](https://theblog.adobe.com/css-vs-svg-shapes-and-arbitrarily-shaped-ui-components/) -<h3 id="shape-image-threshold">shape-image-threshold</h3> +## 仕様書 -<p>{{Compat("css.properties.shape-image-threshold")}}</p> +| 仕様書 | 状態 | 備考 | +| -------------------------- | ----------------------- | -------- | +| {{SpecName("CSS Shapes")}} | {{Spec2("CSS Shapes")}} | 初回定義 | 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 --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p><span class="seoSummary"><strong><code>shape-image-threshold</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。</span></p> +**`shape-image-threshold`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像によってシェイプを抽出するために使用するアルファチャネルのしきい値を設定します。 -<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div> +{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 `0.5` の値は不透過度が 50% よりも大きいピクセルをすべて含めた図形になるという意味です。 -<p>アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 <code>0.5</code> の値は不透過度が50%よりも大きいピクセルをすべて含めた図形になるという意味です。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers notranslate">/* <number> 値 */ +```css +/* <number> 値 */ shape-image-threshold: 0.7; /* グローバル値 */ shape-image-threshold: inherit; shape-image-threshold: initial; +shape-image-threshold: revert; shape-image-threshold: unset; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<alpha-value>")}}</dt> - <dd>画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。</dd> -</dl> +- {{cssxref("<alpha-value>")}} + - : 画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。 -<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> +## 例 -<h3 id="Aligning_text_to_a_gradient" name="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3> +<h3 id="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3> -<p>この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは <code>shape-outside</code> を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。</p> +この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは `shape-outside` を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><div id="gradient-shape"></div> +```html +<div id="gradient-shape"></div> -<p> +<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></pre> +</p> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; hightlight[9] notranslate">#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; -}</pre> - -<p>シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。</p> - -<p>シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 <code>shape-image-threadhold</code> の値を <code>0.2</code> にして使用して作成しています。</p> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}</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('CSS Shapes', '#shape-image-threshold-property', 'shape-image-threshold')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.shape-image-threshold")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li> - <li>{{cssxref("<basic-shape>")}}</li> - <li>{{cssxref("shape-outside")}}</li> - <li>{{cssxref("shape-margin")}}</li> -</ul> +} +``` + +シェイプは画像ファイルではなく、線形グラデーションの {{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")}} diff --git a/files/ja/web/css/shape-margin/index.md b/files/ja/web/css/shape-margin/index.md index 9b46e2aff7..0747095dfb 100644 --- a/files/ja/web/css/shape-margin/index.md +++ b/files/ja/web/css/shape-margin/index.md @@ -2,72 +2,81 @@ title: shape-margin slug: Web/CSS/shape-margin tags: + - 境界 - CSS - - CSS シェイプ - CSS プロパティ + - CSS シェイプ + - 浮動領域 + - プロパティ - Reference + - シェイプ - float - - margin + - マージン + - recipe:css-property - shape-margin - - シェイプ - - プロパティ - - 境界 - - 浮動領域 +browser-compat: css.properties.shape-margin translation_of: Web/CSS/shape-margin --- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>shape-margin</code></strong> プロパティは、 {{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。</span></p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div> +**`shape-margin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/shape-margin.html")}} -<p>マージンで、シェイプ (<strong>浮動要素</strong>) の縁と周囲のコンテンツとの間隔を調整することができます。</p> +マージンで、シェイプ (**浮動要素**) の縁と周囲のコンテンツとの間隔を調整することができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers">/* <length> 値 */ +```css +/* <length> 値 */ shape-margin: 10px; shape-margin: 20mm; -/* <percentage> 値 */ +/* <percentage> 値 */ shape-margin: 60%; /* グローバル値 */ shape-margin: inherit; shape-margin: initial; +shape-margin: revert; shape-margin: unset; -</pre> +``` + +### 値 -<h3 id="Values" name="Values">値</h3> +- `<length-percentage>` + - : シェイプのマージンを {{cssxref("<length>")}} 値または要素の包含ブロックの幅に対する {{cssxref("<percentage>")}} で設定します。 -<dl> - <dt><code><length-percentage></code></dt> - <dd>シェイプのマージンを {{cssxref("<length>")}} 値又は要素の内包ブロックの幅に対する {{cssxref("<percentage>")}} で設定します。</dd> -</dl> +## 公式定義 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +{{CSSInfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +<h3 id="Adding_a_margin_to_a_polygon">多角形にマージンを追加</h3> -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><section> -<div class="shape"></div> +```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></pre> +of Mars, if one exists, probably knows its truth as we know it.</section> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css">section { +```css +section { max-width: 400px; } @@ -79,45 +88,25 @@ of Mars, if he exists, probably knows its truth as we know it.</section></ clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", 500, 250)}}</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('CSS Shapes', '#shape-margin-property', 'shape-margin')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.shape-margin")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li> - <li>{{cssxref("shape-outside")}}</li> - <li>{{cssxref("shape-image-threshold")}}</li> - <li>{{cssxref("<basic-shape>")}}</li> -</ul> +} +``` + +#### 結果 + +{{EmbedLiveSample("Adding_a_margin_to_a_polygon", 500, 250)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS シェイプ](/ja/docs/Web/CSS/CSS_Shapes) +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- {{cssxref("shape-outside")}} +- {{cssxref("shape-image-threshold")}} +- {{cssxref("<basic-shape>")}} diff --git a/files/ja/web/css/shape-outside/index.md b/files/ja/web/css/shape-outside/index.md new file mode 100644 index 0000000000..3dfe78086f --- /dev/null +++ b/files/ja/web/css/shape-outside/index.md @@ -0,0 +1,175 @@ +--- +title: shape-outside +slug: Web/CSS/shape-outside +tags: + - 境界 + - CSS + - CSS プロパティ + - CSS シェイプ + - 浮動領域 + - プロパティ + - Reference + - シェイプ + - マージン + - recipe:css-property + - shape-outside + - wrapping +browser-compat: css.properties.shape-outside +translation_of: Web/CSS/shape-outside +--- +{{CSSRef}} + +**`shape-outside`** は [CSS](/ja/docs/Web/CSS) のプロパティで、隣接するインラインコンテンツが回り込むシェイプ (形状) を — 矩形でない場合もありますが — 定義します。既定では、インラインコンテンツはマージンボックスを回り込みます。`shape-outside` によって、この回り込みをカスタマイズし、テキストが単純なボックスではなく複雑なオブジェクトの周りを回り込めるようにします。 + +{{EmbedInteractiveExample("pages/css/shape-outside.html")}} + +## 構文 + +```css +/* キーワード値 */ +shape-outside: none; +shape-outside: margin-box; +shape-outside: content-box; +shape-outside: border-box; +shape-outside: padding-box; + +/* 関数値 */ +shape-outside: circle(); +shape-outside: ellipse(); +shape-outside: inset(10px 10px 10px 10px); +shape-outside: polygon(10px 10px, 20px 20px, 30px 30px); +shape-outside: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); + +/* <url> 値 */ +shape-outside: url(image.png); + +/* <gradient> 値 */ +shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px); + +/* グローバル値 */ +shape-outside: initial; +shape-outside: inherit; +shape-outside: revert; +shape-outside: unset; +``` + +`shape-outside` プロパティは、*浮動領域*と*浮動要素*を表す以下に挙げた値を使用して指定します。浮動領域はインラインコンテンツ (浮動要素) が囲む形状を指定します。 + +### 値 + +- `none` + - : 浮動領域は影響を受けません。インラインコンテンツは通常通り、要素のマージンボックスを回り込みます。 +- `<shape-box>` + + - : 浮動領域は浮動要素の辺の形状に従って ([CSS ボックスモデル](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) で定義された通りに) 計算されます。これは`margin-box`、`border-box`、`padding-box`、`content-box` の何れかになります。この形状は {{cssxref("border-radius")}} プロパティで生成された丸い角も含みます ({{cssxref("background-clip")}} と同様の動作です)。 + + - `margin-box` + - : マージンの外側の縁で囲まれた形状を定義します。この形状の角の半径は、対応する {{cssxref("border-radius")}} および {{cssxref("margin")}} の値で決定されます。 `border-radius / margin` の比率が `1` 以上の場合、マージンの角の半径は `border-radius + margin` です。この比率が `1` 未満の場合、マージンの角の半径は `border-radius + (margin * (1 + (ratio-1)^3))` となります。 + - `border-box` + - : 境界の外側の縁で囲まれた形状を定義します。この形状は、境界の外側の形状における通常のルールに従います。 + - `padding-box` + - : パディングの外側の縁で囲まれた形状を定義します。この形状は、境界の内側の形状における通常のルールに従います。 + - `content-box` + - : コンテンツの外側の縁で囲まれた形状を定義します。このボックスのそれぞれの角の半径は、 `0` と `border-radius - border-width - padding` の大きい方になります。 + +- {{cssxref("<basic-shape>")}} + - : 浮動領域は、{{cssxref("basic-shape/inset()","inset()")}}、{{cssxref("basic-shape/circle()","circle()")}}、{{cssxref("basic-shape/ellipse()","ellipse()")}}、{{cssxref("basic-shape/polygon()","polygon()")}}、またはレベル 2 の仕様書で追加された `path()` の何れかによって生成された形状に基づいて計算されます。`<shape-box>` も提供された場合は、`<basic-shape>` 関数の参照ボックスを定義します。それ以外の場合、参照ボックスは既定で `margin-box` になります。 +- {{cssxref("<image>")}} + - : 浮動領域は指定された {{cssxref("<image>")}} のアルファチャンネルに基づいて、 {{cssxref("shape-image-threshold")}} で定義されたように抽出され計算されます。 + +> **Note:** {{glossary("User agent", "ユーザーエージェント")}}は、`shape-outside` の値に含まれるすべての URL に対して、HTML5 の仕様で定義されている CORS に対応している可能性のあるフェッチメソッドを使用する必要があります。読み取りの際、ユーザーエージェントは "Anonymous" モードを使用し、参照元をスタイルシートの URL に設定し、文書の URL を含むオリジンを設定しなければなりません。この結果、有効な代替画像がないなどのネットワークエラーが発生した場合は、**`none`** の値を指定したのと同様になります。 + +## 補間 + +1 つ目と 2 つ目の `<basic-shape>` の間でアニメーションを行う場合、次のルールが適用されます。シェイプ関数の中の値は、単純なリストとして補間されます。このリストの値の補間は、可能な限り {{cssxref("<length>")}}、{{cssxref("<percentage>")}}、{{cssxref("calc()")}} のいずれかとして補間されます。リストの値がこれらの型ではなく、同一であった場合 (両方のリストの同じ位置に `nonzero` があった場合など)、それらの値は補間されます。 + +- 両方の形状は、同じ参照ボックスを使用する必要があります。 +- 両方の形状が同じ型であった場合、その型が `ellipse()` または `circle()` であり、かつどの半径にも `closest-side` や `farthest-side` のキーワードを使用していない場合は、シェイプ関数内のそれぞれの値の間で補間されます。 +- 両方の形状が `inset()` 型であった場合、シェイプ関数内のそれぞれの値の間で補間されます。 +- 両方の形状が `polygon()` 型であった場合、両方の多角形の頂点の数が同じで、同じ `<fill-rule>` を使用していた場合は、シェイプ関数内のそれぞれの値の間で補完されます。 +- それ以外の場合は、補間は行われません。 + +## 公式定義 + +{{CSSInfo}} + +## 形式定義 + +{{csssyntax}} + +## 例 + +<h3 id="Funneling_text">漏斗状のテキスト</h3> + +#### HTML + +```html +<div class="main"> + <div class="left"></div> + <div class="right"></div> + <p> + Sometimes a web page's text content appears to be + funneling your attention towards a spot on the page + to drive you to follow a particular link. Sometimes + you don't notice. + </p> +</div> +``` + +#### CSS + +```css +.main { + width: 530px; +} + +.left, +.right { + width: 40%; + height: 12ex; + background-color: lightgray; +} + +.left { + -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); + shape-outside: polygon(0 0, 100% 100%, 0 100%); + float: left; + -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); + clip-path: polygon(0 0, 100% 100%, 0 100%); +} + +.right { + -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); + shape-outside: polygon(100% 0, 100% 100%, 0 100%); + float: right; + -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); + clip-path: polygon(100% 0, 100% 100%, 0 100%); +} + +p { + text-align: center; +} +``` + +#### 結果 + +{{EmbedLiveSample("Funneling_text", "100%", 130)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [CSS シェイプ](/ja/docs/Web/CSS/CSS_Shapes) +- [CSS シェイプの概要](/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) +- [ボックス値からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/From_box_values) +- [基本シェイプ](/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes) +- [画像からのシェイプ](/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images) +- {{cssxref("<basic-shape>")}} +- {{cssxref("shape-margin")}} +- {{cssxref("shape-image-threshold")}} |