CSS シェイプ関係の文書を更新

- 2021/10/09 時点の英語版に同期

1 files changed, 34 insertions, 73 deletions

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("&lt;basic-shape&gt;")}}</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("&lt;basic-shape&gt;")}}
 
-<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")}} | 初回定義 |