initial commit

5 files changed, 510 insertions, 0 deletions

diff --git a/files/ja/web/css/css_shapes/basic_shapes/index.html b/files/ja/web/css/css_shapes/basic_shapes/index.html
new file mode 100644
index 0000000000..cc24d1ced2
--- /dev/null
+++ b/files/ja/web/css/css_shapes/basic_shapes/index.html
@@ -0,0 +1,143 @@
+---
+title: 基本シェイプ
+slug: Web/CSS/CSS_Shapes/Basic_Shapes
+tags:
+  - CSS
+  - CSS Shapes
+  - CSS シェイプ
+  - Guide
+  - Reference
+  - ガイド
+translation_of: Web/CSS/CSS_Shapes/Basic_Shapes
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">CSS のシェイプは {{cssxref("&lt;basic-shape&gt;")}} 型を使用して定義することができ、このガイドでは、この方で受け入れられる様々な値のそれぞれが、どのように動作するかを説明します。単純な円から複雑な多角形までがあります。</p>
+
+<p>シェイプについて見る前に、これらのシェイプを実現するために一緒に使われる二つの情報を理解しておくことに価値があります。</p>
+
+<ul>
+ <li><code>&lt;basic-shape&gt;</code> 型</li>
+ <li>参照ボックス</li>
+</ul>
+
+<h2 id="The_&lt;basic-shape>_type" name="The_&lt;basic-shape>_type">&lt;basic-shape&gt; 型</h2>
+
+<p><code>&lt;basic-shape&gt;</code> 型は、すべての基本シェイプを値として使用します。この方は関数表記を使用します。シェイプ型の後に括弧が続き、中にシェイプを説明する追加の値があります。</p>
+
+<p>受け付ける引数は、作成しようとしているシェイプによって様々です。これらは以下の例で説明します。</p>
+
+<h2 id="The_reference_box" name="The_reference_box">参照ボックス</h2>
+
+<p>CSS シェイプで使用される参照ボックスを理解することは、これがそれぞれのシェイプの座標システムを定義するので、基本シェイプを使用するときには重要です。参照ボックスは既に<a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">ボックス値からシェイプを作成するガイド</a>で、直接参照ボックスを使用してシェイプを作成するのを見たことがありますね。</p>
+
+<p>The Firefox Shapes Inspector helpfully shows the reference box in use when you inspect a shape. In the screenshot below I have created a circle, using <code>shape-outside: circle(50%)</code>. The floated element has 20 pixels of padding, border and margin applied, and the Shapes Inspector highlights these reference boxes. When using a Basic Shape the reference box used by default is the margin-box. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15904/shapes-reference-box.png" style="height: 840px; width: 1536px;"></p>
+
+<p>You can add the various Box Values after your Basic Shape definition. Therefore the default behaviour is as if you have defined.</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) margin-box;
+}
+</pre>
+
+<p>You can therefore change this in order that your shape uses the different parts of the box model, for example to use the border.</p>
+
+<pre class="brush: css">.shape {
+  shape-outside: circle(50%) border-box;
+}
+</pre>
+
+<p>What is worth noting is that the <code>margin-box</code> will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box. We will see this in the following examples of basic shapes.</p>
+
+<p>For an excellent description of references boxes as they apply to CSS Shapes see <a href="http://razvancaliman.com/writing/css-shapes-reference-boxes/">Understanding Reference Boxes for CSS Shapes</a>.</p>
+
+<h2 id="inset()">inset()</h2>
+
+<p>The <code>inset()</code> type defines a rectangle, which may not seem very useful as simply floating an item will give you a rectangular shape around it. However the <code>inset()</code> types enables the definition of offsets, thus pulling the content in over the shape.</p>
+
+<p>Therefore <code>inset()</code> takes four values for the top, right, bottom and left values plus a final value for <code>border-radius</code>. The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px 20px 10px round 10px);
+}
+</pre>
+
+<p>Using the same rules as we use for the margin shorthand, you can set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. So, the above rules could also be described as:</p>
+
+<pre class="brush: css">.shape {
+  float: left;
+  shape-outside: inset(20px 10px round 10px);
+}</pre>
+
+<p>In the example below we have an <code>inset()</code> shape used to pull content over the floated element. Change the offset values to see how the shape changes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}}</p>
+
+<p>You can also add the Box Value that you wish to use as a reference box. In the example below change the reference box from <code>margin-box</code> to <code>border-box</code>, <code>padding-box</code> or <code>content-box</code> to see how the reference box used as the starting point before offsets are calculated changes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}}</p>
+
+<h2 id="circle()">circle()</h2>
+
+<p>The <code>circle()</code> value for <code>shape-outside</code> can accept two possible arguments. The first is the <code>shape-radius</code>.</p>
+
+<p>Both <code>circle()</code> and <code>ellipse()</code> values for <code>shape-outside</code> are specified as accepting this argument of <code>&lt;shape-radius&gt;</code>. This argument can be a length or percentage but can also be one of the keywords <code>closest-side</code> or <code>farthest-side</code>.</p>
+
+<p>The keyword <code><strong>closest-side</strong></code> uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.</p>
+
+<p>The keyword <code><strong>farthest-side</strong></code> uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.</p>
+
+<p>The second argument is a <code>position</code>. If omitted this will be set to <code>center</code>. However you can use any valid position here to indicate the position of the centre of the circle.</p>
+
+<p>Our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword <strong>at</strong> followed by a position value.</p>
+
+<p>In the below example I have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. This gives a total width for the reference box of 140 pixels. I have given a value of 50% for the shape-radius value which means that our radius is 70px. I have then set the position value to 30%.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}}</p>
+
+<p>In the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for <code>inset()</code>.</p>
+
+<p>As an additional example, if you use the keywords <code>top left</code> for position, you can make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter circle shape for text to flow around.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}}</p>
+
+<h3 id="The_shape_will_be_clipped_by_the_margin_box" name="The_shape_will_be_clipped_by_the_margin_box">シェイプはマージンボックスで切り取られる</h3>
+
+<p>When describing Reference Boxes I explained that the margin-box will clip the shape. You can see this by moving the centre of our circle towards the content by setting the position to 60%. The centre of the circle is now nearer the content and the circle extends past the margin-box. This means that the extension becomes clipped and squared off.</p>
+
+<pre class="brush: css">img {
+  float: left;
+  shape-outside: circle(50% at 60%);
+}
+</pre>
+
+<p><img alt="The circle shape is clipped by the margin box" src="https://mdn.mozillademos.org/files/15903/shapes-circle-clipped.png" style="height: 602px; width: 1536px;"></p>
+
+<h2 id="ellipse()">ellipse()</h2>
+
+<p>An ellipse is essentially a squashed circle and so <code>ellipse()</code> acts in a very similar way to <code>circle()</code> except that we have to specify two radii x and y in that order.</p>
+
+<p>These may then be followed by position values as with <code>circle()</code> to move the centre of the ellipse around. In the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the centre of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}}</p>
+
+<p>The keyword values of <code>closest-side</code> and <code>farthest-side</code> are useful to create a quick ellipse based on the size of the floated element reference box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}}</p>
+
+<h2 id="polygon()">polygon()</h2>
+
+<p>The final Basic Shape is the most complex and enables the creation of many side shapes by way of creating a <code>polygon()</code>. This shape accepts three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.</p>
+
+<p>In the example below I have created a shape for text to follow using the <code>polygon()</code>, you can change any of the values to see how the shape is changed.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}}</p>
+
+<p>You may well find the Firefox Shape Inspector very useful here to create your polygon shape. The screenshot below shows the shape highlighted in the tool.</p>
+
+<p><img alt="The polygon basic shape, highlighted with the Shapes Inspector." src="https://mdn.mozillademos.org/files/15902/shapes-polygon.png" style="height: 540px; width: 1524px;"></p>
+
+<p>Another useful resource is <a href="http://bennettfeely.com/clippy/">Clippy</a> - a tool for creating shapes for <code>clip-path</code>, as the values for Basic Shapes are the same as those used for <code>clip-path</code>.</p>
diff --git a/files/ja/web/css/css_shapes/from_box_values/index.html b/files/ja/web/css/css_shapes/from_box_values/index.html
new file mode 100644
index 0000000000..d61ef23ffd
--- /dev/null
+++ b/files/ja/web/css/css_shapes/from_box_values/index.html
@@ -0,0 +1,80 @@
+---
+title: ボックス値からのシェイプ
+slug: Web/CSS/CSS_Shapes/From_box_values
+tags:
+  - Boundaries
+  - Boxes
+  - CSS
+  - CSS Shapes
+  - Guide
+  - Margins
+  - border-box
+  - border-radius
+  - box values
+  - content-box
+  - float
+  - margin-box
+  - padding-box
+  - shapes
+translation_of: Web/CSS/CSS_Shapes/From_box_values
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">シェイプを作るのに直接的な方法が、 CSS ボックスモデルの値を使用することです。この記事では、これを行う方法を説明します。</p>
+
+<p>シェイプの値として許可されている<a href="https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values">ボックス値</a>は次の通りです。</p>
+
+<ul>
+ <li><code>content-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>border-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p><code>border-radius</code> の値にも対応しており、これはページに丸い縁を持った物を作ることができ、シェイプは作成されたシェイプに従うことができます。</p>
+
+<h2 id="CSS_box_model" name="CSS_box_model">CSS ボックスモデル</h2>
+
+<p>上に挙げた値は CSS ボックスモデルの様々な部分に対応します。 CSS のボックスにはコンテンツ、パディング、境界、マージンがあります。</p>
+
+<p><img alt="ボックスモデルはマージン、境界、パディング、コンテンツの各ボックスから成ります。" src="https://mdn.mozillademos.org/files/15845/box-model.png" style="height: 267px; width: 447px;"></p>
+
+<p>シェイプにボックス値を使用することで、これらの値で定義された辺でコンテンツを折り返すことができます。以下の例で、コンテンツの様々な流れ方が分かるように、パディング、境界、マージンを持つ要素を使用しています。</p>
+
+<h3 id="margin-box">margin-box</h3>
+
+<p><code>margin-box</code> は外側のマージンの縁と、要素の定義で {{cssxref("border-radius")}} を使用することで、シェイプの角の半径によって定義されます。</p>
+
+<p>以下の例では、高さ、幅、背景色を設定した {{htmlelement("div")}} である紫色の丸いアイテムが表示されます。 <code>border-radius</code> プロパティを使用して丸を作成しており、 <code>border-radius: 50%</code> と設定しています。要素にマージンがあるので、コンテンツは丸いシェイプに回り込み、マージンが適用されています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}}</p>
+
+<h3 id="border-box">border-box</h3>
+
+<p><code>border-box</code> の値は、境界の外側の縁で定義されるシェイプです。このシェイプは通常の、境界の外側におけるすべての角の丸め規則に従います。 CSS の {{cssxref("border")}} プロパティを使用していなくても、境界は存在します。この場合、境界は <code>padding-box</code> と同じになり、シェイプはパディングの縁の外側として定義されます。</p>
+
+<p>次の例では、テキストが境界線によって作成された線に従うようになったのが分かります。境界寸法を変更すると、コンテンツがそれに従います。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}</p>
+
+<h3 id="padding-box">padding-box</h3>
+
+<p><code>padding-box</code> の値は、パディングの縁に囲まれたシェイプを定義します。このシェイプは境界の内側におけるすべての角の丸め規則に従います。パディングがない場合、 <code>padding-box</code> は <code>content-box</code> と同じです。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}}</p>
+
+<h3 id="content-box">content-box</h3>
+
+<p><code>content-box</code> の値は、コンテンツの外側の縁で囲まれたシェイプを定義します。このボックスにおけるそれぞれの角の丸めは、0または border-radius − border-width − padding より大きくなります。つまり、ここでは負の数を取ることはできません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}</p>
+
+<h2 id="When_to_use_the_box_values" name="When_to_use_the_box_values">ボックス値を使用する場面</h2>
+
+<p>シェイプを作成するのに、ボックス値を使用すると簡単ですが、これはよく対応されている <code>border-radius</code> プロパティを使用して定義することができる簡単なシェイプしか実現することができません。上記の使用例にあるような使い方の一つです。 border-radius を使用して円形のシェイプを作成し、それに沿って文字列をカーブさせます。</p>
+
+<p>いくらかの面白い効果を作成することができますが、単純なテクニックしか使っていません。この章の最後の例で、左右に2つのフロート状態の要素を作成し、それぞれの文字列寄りの方向に対して、 border-radius を100%に設定しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}</p>
+
+<p>もっと複雑なシェイプについては、この章の他のガイドにあるように、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">基本シェイプ</a>のうちの一つを値として使用するか、画像からシェイプを定義するかする必要があります。</p>
diff --git a/files/ja/web/css/css_shapes/index.html b/files/ja/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..4cabef851a
--- /dev/null
+++ b/files/ja/web/css/css_shapes/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS シェイプ
+slug: Web/CSS/CSS_Shapes
+tags:
+  - CSS
+  - CSS シェイプ
+  - Reference
+  - 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>
+
+<h3 id="Data_types" name="Data_types">データ型</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("&lt;basic-shape&gt;")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides" name="Guides">ガイド</h2>
+
+<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>
+
+<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>
+
+<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>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<h3 id="shape-outside">shape-outside</h3>
+
+<p>{{Compat("css.properties.shape-outside")}}</p>
+
+<h3 id="shape-margin">shape-margin</h3>
+
+<p>{{Compat("css.properties.shape-margin")}}</p>
+
+<h3 id="shape-image-threshold">shape-image-threshold</h3>
+
+<p>{{Compat("css.properties.shape-image-threshold")}}</p>
diff --git a/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html b/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html
new file mode 100644
index 0000000000..419a72fb93
--- /dev/null
+++ b/files/ja/web/css/css_shapes/overview_of_css_shapes/index.html
@@ -0,0 +1,125 @@
+---
+title: CSS シェイプの概要
+slug: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+tags:
+  - CSS
+  - CSS シェイプ
+  - シェイプ
+  - 概要
+translation_of: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><a href="https://www.w3.org/TR/css-shapes/">CSS シェイプレベル１仕様書</a>は、 CSS における幾何学的な図形 (シェイプ) を記述しています。仕様書のレベル１は、浮動状態のアイテムに適用するように設計されています。この記事では、シェイプを使用して何ができるのかの概要を紹介します。</p>
+
+<p>例えば、アイテムを左にフロートした状態にすると、テキストがアイテムの右と下に矩形に回り込みます。円形のシェイプを適用すると、テキストは円形の線に沿って回り込みます。</p>
+
+<p>これらのシェイプを作成する方法はいくつもあり、これらのガイドで CSS シェイプの動作や、利用しやすい方法を考えます。</p>
+
+<h2 id="What_does_the_specification_define" name="What_does_the_specification_define">仕様書は何を定義しているのか</h2>
+
+<p>仕様書では、三つの新しいプロパティを定義しています。</p>
+
+<ul>
+ <li>{{cssxref("shape-outside")}} — 基本的なシェイプを定義することができます</li>
+ <li>{{cssxref("shape-image-threshold")}} — 透過性のしきい値を設定します。画像がシェイプの定義に使用される場合、画像の中で透過度がしきい値以上の部分のみが、シェイプとして定義されます。他の部分は無視されます。</li>
+ <li>{{cssxref("shape-margin")}} — 定義されたシェイプの周囲のマージンを設定します。</li>
+</ul>
+
+<h2 id="Defining_basic_shapes" name="Defining_basic_shapes">基本シェイプの定義</h2>
+
+<p><code>shape-outside</code> プロパティで、シェイプを定義することができます。これは様々な値を取り、 {{cssxref("&lt;basic-shape&gt;")}} データ型で定義され、すべてが異なるシェイプを定義します。とても簡単なケースから見てみましょう。</p>
+
+<p>次の例では、左に浮動状態にした画像があります。それから <code>shape-outside</code> プロパティを <code>circle(50%)</code> の値で適用しています。その結果として、コンテンツは画像のボックスで形成された矩形ではなく、丸い形状の周りのカーブになります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}</p>
+
+<p>仕様書のこのレベルでは、要素は <code>&lt;basic-shape&gt;</code> を適用するために浮動状態でなければなりません。これは多くの場合、単純な方法で代替されるという副作用があります。シェイプに対応したブラウザーがない場合、ユーザーは以前のように矩形のボックスの縁をコンテンツが回り込むように見えるでしょう。シェイプの対応がある場合は、見栄えが改善されます。</p>
+
+<h3 id="Basic_Shapes" name="Basic_Shapes">基本的なシェイプ</h3>
+
+<p><code>circle(50%)</code> の値は基本的なシェイプの例の一つです。仕様書では次のように、４つの <code>&lt;basic-shape&gt;</code> 値を定義しています。</p>
+
+<ul>
+ <li><code>inset()</code></li>
+ <li><code>circle()</code></li>
+ <li><code>ellipse()</code></li>
+ <li><code>polygon()</code></li>
+</ul>
+
+<p><code>inset()</code> の値を使用すると、テキストが矩形のシェイプに回り込みますが、オフセット値を追加すると、周囲のコンテンツの行ボックスを通常よりもオブジェクトに引き寄せて配置することができます。</p>
+
+<p>すでに <code>circle()</code> が円形のシェイプを作成するのを見てきました。 <code>ellipse()</code> は基本的なつぶれた円です。これらの単純なシェイプで対応できない場合は、 <code>polygon()</code> を作成して好きなだけ複雑なシェイプにすることができます。</p>
+
+<p>この章の<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes">基本シェイプのガイド</a>で、利用できるそれぞれの基本シェイプとその作成方法を紹介します。</p>
+
+<h3 id="Shapes_from_the_Box_Value" name="Shapes_from_the_Box_Value">ボックス値からのシェイプの作成</h3>
+
+<p>シェイプはボックス値の周りに作成することができます。従って、次のボックスの上にシェイプを作成することができます。</p>
+
+<ul>
+ <li><code>border-box</code></li>
+ <li><code>padding-box</code></li>
+ <li><code>content-box</code></li>
+ <li><code>margin-box</code></li>
+</ul>
+
+<p>次の例では、 <code>border-box</code> の値を他の取りうる値に変更して、シェイプがボックスに近づいたり離れたりする様子を確認することができます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}}</p>
+
+<p>ボックス値についてより詳しく知るには、<a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values">ボックス値からのシェイプの作成</a>を参照してください。</p>
+
+<h3 id="Shapes_from_images" name="Shapes_from_images">画像からのシェイプの作成</h3>
+
+<p>パスを作成するための面白い方法として、アルファチャネルを持つ画像を使用する方法があります。 — 文字列は画像の不透過な部分に回り込みます。これで画像の周りのコンテンツの回り込みの重ね合わせができたり、画像をページ上に表示させずに、純粋に注意深くポリゴンに変換することなく複雑なシェイプを作成する手段として利用したりすることができます。</p>
+
+<p>なお、この方法で使用される画像は <a href="/ja/docs/Web/HTTP/CORS">CORS に互換性がある</a>必要があり、そうでなければ <code>shape-outside</code> は値として <code>none</code> が指定されたかのように動作し、シェイプを得ることはできません。</p>
+
+<p>次の例では、完全に透過した領域がある画像を用い、この画像を <code>shape-outside</code> の URL 値として使用しています。シェイプは透過しない領域 — つまり、気球の画像の周りに作られます。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}}</p>
+
+<h4 id="shape-image-threshold" name="shape-image-threshold"><code>shape-image-threshold</code></h4>
+
+<p><code>shape-image-threshold</code> プロパティは、シェイプに使われる画像の領域を定義する画像の透過性のしきい値を設定するために使用します。 <code>shape-image-threshold</code> が <code>0.0</code> (初期値) である場合、領域は完全に透過になります。値が <code>1.0</code> である場合は完全に不等価になります。この間の値ならば、半透過の領域をシェイプを定義する領域として設定することができます。</p>
+
+<p>シェイプを定義する画像としてグラデーションを使用すると、しきい値が良く見えます。次の例では、しきい値を変更すると、選択した透明度のレベルに基づいてシェイプが変化するパスが変化します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}}</p>
+
+<p>画像からのシェイプの作成については、このガイドの<a href="/ja/docs/Web/CSS/CSS_Shapes/Shapes_From_Images">画像からのシェイプ</a>でより深く見てみます。</p>
+
+<h2 id="The_shape-margin_property" name="The_shape-margin_property"><code>shape-margin</code> プロパティ</h2>
+
+<p>{{cssxref("shape-margin")}} プロパティは <code>shape-outside</code> にマージンを追加します。これにより、シェイプを囲むコンテンツの行ボックスがシェイプから引き離されるため、短くなります。</p>
+
+<p>次の例では、基本的なシェイプに <code>shape-margin</code> を追加しました。マージンを変更して、初期値で設定されるシェイプの輪郭からテキストを引き離してみてください。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}}</p>
+
+<h2 id="Using_Generated_Content_as_the_floated_item" name="Using_Generated_Content_as_the_floated_item">作成されたコンテンツの浮動状態のアイテムとしての使用</h2>
+
+<p>上記の例では、シェイプを定義するために画像や見える要素、つまりページ上にシェイプを見ることができる形でシェイプを定義してきました。しかし、単に矩形ではない見えない線に沿ってテキストを流したい場合があるでしょう。これをシェイプを使って行うことができますが、この場合も浮動状態のアイテムが必要で、これを非表示にすることができます。これは文書に空の {{htmlelement("div")}} 又は {{htmlelement("span")}} のような冗長な要素を挿入することで実現できますが、おすすめは生成コンテンツを使うことです。つまり、 CSS のスタイルを使用して実現することができます。</p>
+
+<p>次の例では、高さと幅が150pxの要素を挿入するために生成コンテンツを利用します。それから基本シェイプやボックス値、画像のアルファチャネルを使用して、文字列を折り返すシェイプを作成します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}}</p>
+
+<h2 id="Relationship_to_clip-path" name="Relationship_to_clip-path"><code>clip-path</code> との関係</h2>
+
+<p>シェイプを作成するために使われる基本シェイプとボックス値は、 {{cssxref("clip-path")}} の値として使われているものと同じです。従って、画像を使ってシェイプを作成したい場合や、画像の一部を切り抜きたい場合は、同じ値を使用してください。</p>
+
+<p>以下の画像は青い背景の四角い画像です。 <code>shape-outside: ellipse(40% 50%);</code> 及び <code>clip-path: ellipse(40% 50%);</code> を使用して、シェイプを定義するのに使われるのと同じ領域で切り取りを行うよう定義しました。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}}</p>
+
+<h2 id="Developer_Tools_for_Shapes" name="Developer_Tools_for_Shapes">シェイプのための開発者ツール</h2>
+
+<p>ブラウザーが CSS シェイプに対応するのと同時に、 Firefox は開発ツール内で<a href="/ja/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">シェイプパスエディター</a>を公開しています。このツールはつまり、ページ内にあるシェイプを検査し、値の変更も行います。ポリゴンが正しくない場合は、シェイプエディターを使用して調整してから、新しい値をコピーして CSS に書き戻すことができます。</p>
+
+<p>シェイプパスエディターは、 Firefox 60 で <code>clip-path</code> から生成されるシェイプと共に既定で有効になる予定です。 <code>shape-outside</code> で生成されるシェイプを使用することもできますが、 <code>layout.css.shape-outside.enabled</code> の設定を有効にした場合のみです。</p>
+
+<h2 id="Future_CSS_Shapes_Features" name="Future_CSS_Shapes_Features">将来の CSS シェイプ機能</h2>
+
+<p>当初のシェイプ仕様書には、要素内にシェイプを作成するための <code>shape-inside</code> プロパティが含まれていました。このプロパティは、浮動状態ではないシェイプを作成することができる機能と共に、仕様書の<a href="https://drafts.csswg.org/css-shapes-2/">レベル２</a>に移動されました。当初は <code>shape-inside</code> が仕様書のレベル１に含まれていたため、ウェブ上のチュートリアルには両方のプロパティの詳細が書かれているかもしれません。</p>
diff --git a/files/ja/web/css/css_shapes/shapes_from_images/index.html b/files/ja/web/css/css_shapes/shapes_from_images/index.html
new file mode 100644
index 0000000000..843fc47ceb
--- /dev/null
+++ b/files/ja/web/css/css_shapes/shapes_from_images/index.html
@@ -0,0 +1,62 @@
+---
+title: 画像からのシェイプの作成
+slug: Web/CSS/CSS_Shapes/Shapes_From_Images
+tags:
+  - CSS シェイプ
+translation_of: Web/CSS/CSS_Shapes/Shapes_From_Images
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">このガイドでは、アルファチャンネルを含む画像ファイルから、または CSS グラデーションから、シェイプを作成する方法を見ていきます。これはシェイプを作成するためのとても柔軟な方法です。 CSS で複雑なポリゴンを持つパスを描画するのではなく、グラフィックプログラムでシェイプを作成し、しきい値よりも透明度の低いピクセルによって作成されたパスを使用することができます。</p>
+
+<h2 id="A_simple_shape_from_an_image" name="A_simple_shape_from_an_image">画像をもとにした単純なシェイプ</h2>
+
+<p>シェイプの画像を使用するには、完全に不透明ではない領域があるアルファチャンネルが必要です。 {{cssxref("shape-image-threshold")}} プロパティは、この不透明度のしきい値を設定するために使用されます。この値よりも透明度の低いピクセルは、シェイプの範囲を計算するために使用されます。</p>
+
+<p>簡単な例として、赤い塗りつぶしの星形の領域と、完全に透明な領域のある画像があります。 {{cssxref("shape-outside")}} プロパティの値として、画像ファイルへのパスを使用します。コンテンツは星形の図形で折り返されるようになりました。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}}</p>
+
+<p>シェイプからテキストを離すために {{cssxref("shape-margin")}} を使用することができ、作成されたシェイプの周囲と、テキストとの間のマージンを指定します。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}}</p>
+
+<h2 id="CORS_compatibility" name="CORS_compatibility">CORS の互換性</h2>
+
+<p>画像からシェイプを作成する際には、使用する画像が <a href="/ja/docs/Web/HTTP/CORS">CORS 互換</a>である必要があります。サイトと同じドメインにホスティングされている画像は動作しますが、画像が CDN などの別のドメインでホスティングされている場合は、正しいヘッダーを送信してシェイプで利用できるようにする必要があります。この CORS 互換画像の要件のため、ローカルのウェブサーバーを使用せずにローカルでファイルをプレビューすると、シェイプは機能しません。</p>
+
+<h3 id="Is_it_a_CORS_issue" name="Is_it_a_CORS_issue">CORS の問題かどうか</h3>
+
+<p>開発者ツールは CORS エラーを特定するのに役立ちます。 Chrome では、コンソールから CORS の問題が通知されます。 Firefox では、プロパティを調べると、イメージを読み込めないという警告が表示されます。これは、画像が CORS のためにシェイプのソースとして使用できないという事実を警告するはずです。</p>
+
+<h2 id="Setting_a_threshold" name="Setting_a_threshold">しきい値の設定</h2>
+
+<p>{{cssxref("shape-image-threshold")}} プロパティを使用すると、完全な透明ではない領域からシェイプを作成することができます。 <code>shape-image-threshold</code> の値が <code>0.0</code> (初期値) の場合、領域は完全に透明になります。値が <code>1.0</code> の場合は完全に不透明です。中間の値は、半透明領域を定義領域として設定できることを意味します。</p>
+
+<p>次の例では、最初の例と同様の画像を使用していますが、この画像では、星の背景が完全に透明ではなく、グラフィックプログラムで20％の不透明度が作成されています。 <code>shape-image-threshold</code> を <code>0.3</code> に設定すると図形が表示され、 <code>0.2</code> より小さい値に設定すると、図形がなくなります。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}}</p>
+
+<h2 id="Using_images_with_generated_content" name="Using_images_with_generated_content">生成されたコンテンツの画像を使用</h2>
+
+<p>上記の例では、画像を {{cssxref("shape-outside")}} の値として使用し、ページにも追加しました。多くのデモでは、従っているシェイプを見せるためにこれを行っていますが、 <code>shape-outside</code> プロパティはページに表示される画像とは関係がないため、画像を使用してシェイプを作成するために、画像を表示する必要はありません。</p>
+
+<p>何かを浮動状態にする必要がありますが、以下の例のように生成されたコンテンツを使用することもできます。ここでは生成されたコンテンツを浮動状態にし、大きな星形の画像を使ってコンテンツを整形していますが、ページ上には何も画像を表示していません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}}</p>
+
+<h2 id="Creating_shapes_using_a_gradient" name="Creating_shapes_using_a_gradient">グラデーションを用いたシェイプの作成</h2>
+
+<p><a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">CSS グラデーション</a>は画像として扱われるので、透過や半透過の領域をグラデーションの一部として持つことで、グラデーションを使ってシェイプを作ることができます。</p>
+
+<p>次の例では、直線グラデーションの背景画像によって与えられた生成された浮動状態のコンテンツを使用しています。 {{cssxref("shape-outside")}} の値と同じ値を使用しています。直線グラデーションは紫色から透明に変化しますので、 {{cssxref("shape-image-threshold")}} の値を変更すると、どれくらいのピクセルがシェイプを作成するのに必要かを決めることができます。以下の例で値を操作することで、その値に応じてシェイプを横切る対角線がどれだけ移動するかを確認することができます。</p>
+
+<p>背景画像を完全に削除してみることもでき、そうすればグラデーションは純粋にシェイプを作成するために使用され、ページには全く表示されません。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}}</p>
+
+<p>次の例では、楕円形の放射状のグラデーションを使用し、グラデーションの透過部分を再利用してシェイプを作成しています。</p>
+
+<p>{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}}</p>
+
+<p>これらのライブサンプルで直接実験して、グラデーションを変更するとシェイプのパスがどのように変化するかを確認することができます。</p>