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/shape-margin/index.html | 123 ------------------------------- files/ja/web/css/shape-margin/index.md | 123 +++++++++++++++++++++++++++++++ 2 files changed, 123 insertions(+), 123 deletions(-) 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/web/css/shape-margin') 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