diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-10 12:36:07 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-18 12:32:20 +0900 |
commit | 9595be3220981263fcfc3bb7c5e111102ddaae7e (patch) | |
tree | 429c4f720436677cf6ccd9afc984bc5d7047f72a /files/ja/web/css/shape-margin/index.html | |
parent | 2462e9d957c746129aa820c676c115c7faa6ce13 (diff) | |
download | translated-content-9595be3220981263fcfc3bb7c5e111102ddaae7e.tar.gz translated-content-9595be3220981263fcfc3bb7c5e111102ddaae7e.tar.bz2 translated-content-9595be3220981263fcfc3bb7c5e111102ddaae7e.zip |
CSS シェイプの文書を変換準備
Diffstat (limited to 'files/ja/web/css/shape-margin/index.html')
-rw-r--r-- | files/ja/web/css/shape-margin/index.html | 123 |
1 files changed, 0 insertions, 123 deletions
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 ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>shape-margin</code></strong> プロパティは、 {{cssxref("shape-outside")}} を使用して作成された CSS シェイプのマージンを設定します。</span></p> - -<div>{{EmbedInteractiveExample("pages/css/shape-margin.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>マージンで、シェイプ (<strong>浮動要素</strong>) の縁と周囲のコンテンツとの間隔を調整することができます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">/* <length> 値 */ -shape-margin: 10px; -shape-margin: 20mm; - -/* <percentage> 値 */ -shape-margin: 60%; - -/* グローバル値 */ -shape-margin: inherit; -shape-margin: initial; -shape-margin: unset; -</pre> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>シェイプのマージンを {{cssxref("<length>")}} 値又は要素の内包ブロックの幅に対する {{cssxref("<percentage>")}} で設定します。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: 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></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: 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; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", 500, 250)}}</p> - -<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', '#shape-margin-property', 'shape-margin')}}</td> - <td>{{Spec2('CSS Shapes')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("css.properties.shape-margin")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes">CSS シェイプ</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">CSS シェイプの概要</a></li> - <li>{{cssxref("shape-outside")}}</li> - <li>{{cssxref("shape-image-threshold")}}</li> - <li>{{cssxref("<basic-shape>")}}</li> -</ul> |