From a5244332483ce91b0be09cc7a6ef057a8d37884f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 10 Oct 2021 22:04:24 +0900 Subject: CSS シェイプ関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/09 時点の英語版に同期 --- files/ja/web/css/shape-margin/index.md | 131 +++++++++++++++------------------ 1 file changed, 60 insertions(+), 71 deletions(-) (limited to 'files/ja/web/css/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 --- -
{{CSSRef}}
- -

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

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/shape-margin.html")}}
+**`shape-margin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。 - +{{EmbedInteractiveExample("pages/css/shape-margin.html")}} -

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

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

構文

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

値

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

形式文法

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

例

+## 例 + +

多角形にマージンを追加

-

HTML

+#### HTML -
<section>
-<div class="shape"></div>
+```html
+

+

 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>
+of Mars, if one exists, probably knows its truth as we know it. +``` -

CSS

+#### 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>
-
-
結果

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

-
-
仕様書

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

-
-
{{cssinfo}}

-
-
ブラウザーの互換性

-
-

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

-

-
-
関連情報

-
-
+}
+```
+
+#### 結果
+
+{{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>")}}
-- 
cgit v1.2.3-54-g00ecf