From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/shape-margin/index.html | 125 +++++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/ja/web/css/shape-margin/index.html (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 new file mode 100644 index 0000000000..01ca907161 --- /dev/null +++ b/files/ja/web/css/shape-margin/index.html @@ -0,0 +1,125 @@ +--- +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