diff options
Diffstat (limited to 'files/ja/web/css/shape-image-threshold/index.html')
| -rw-r--r-- | files/ja/web/css/shape-image-threshold/index.html | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/files/ja/web/css/shape-image-threshold/index.html b/files/ja/web/css/shape-image-threshold/index.html new file mode 100644 index 0000000000..fe262be09a --- /dev/null +++ b/files/ja/web/css/shape-image-threshold/index.html @@ -0,0 +1,133 @@ +--- +title: shape-image-threshold +slug: Web/CSS/shape-image-threshold +tags: + - Boundaries + - CSS + - CSS Property + - CSS Shapes + - Float Area + - Opacity + - Property + - Reference + - Shape + - 'recipe:css-property' + - shape-image-threshold +translation_of: Web/CSS/shape-image-threshold +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong><code>shape-image-threshold</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 {{cssxref("shape-outside")}} の値に指定された画像を使用してシェイプを抽出するのに使用される、アルファチャネルのしきい値を設定します。</span></p> + +<div>{{EmbedInteractiveExample("pages/css/shape-image-threshold.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>アルファコンポーネントの値がしきい値よりも大きいピクセルはすべて、境界を特定するためのシェイプの一部とみなされます。例えば、 <code>0.5</code> の値は不透過度が50%よりも大きいピクセルをすべて含めた図形になるという意味です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush:css no-line-numbers notranslate">/* <number> 値 */ +shape-image-threshold: 0.7; + +/* グローバル値 */ +shape-image-threshold: inherit; +shape-image-threshold: initial; +shape-image-threshold: unset; +</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt>{{cssxref("<alpha-value>")}}</dt> + <dd>画像からシェイプを抽出するために使用されるしきい値を設定します。シェイプはアルファ値がしきい値より大きいピクセルによって定義されます。 0.0 (完全に透過) から 1.0 (完全に不透過) の範囲を外れた値は、この範囲に収められます。</dd> +</dl> + +<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + +<p>{{cssinfo}}</p> + +<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Aligning_text_to_a_gradient" name="Aligning_text_to_a_gradient">グラデーションへのテキストの配置</h3> + +<p>この例では、グラデーションの背景画像を持つ {{HTMLElement("div")}} ブロックを作成します。グラデーションは <code>shape-outside</code> を使用して CSS シェイプとして確立されているので、グラデーションの中のピクセルのうち 20% よりも大きい不透過度 (つまり、アルファコンポーネントが 0.2 よりも大きいピクセル) はシェイプの一部とみなされます。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div id="gradient-shape"></div> + +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi + voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint + facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat + adipisci, libero quae nihil porro debitis laboriosam inventore animi + impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque + a mollitia dicta repudiandae illum exercitationem aliquam repellendus + ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto + nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit + accusamus iusto dolore, at provident eius alias maxime pariatur non + deleniti ipsum sequi rem eveniet laboriosam magni expedita? +</p></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; hightlight[9] notranslate">#gradient-shape { + width: 150px; + height: 150px; + float: left; + background-image: linear-gradient(30deg, black, transparent 80%, + transparent); + shape-outside: linear-gradient(30deg, black, transparent 80%, + transparent); + shape-image-threshold: 0.2; +}</pre> + +<p>シェイプは画像ファイルではなく、線形グラデーションの {{cssxref("background-image")}} を使用して定義されています。同じグラデーションが、 {{cssxref("shape-outside")}} プロパティを使用して、浮動領域を設定するためにシェイプが取得される画像としても使用されます。</p> + +<p>シェイプの部分として扱うグラデーション内のピクセルは20%の不透過度がしきい値なので、 <code>shape-image-threadhold</code> の値を <code>0.2</code> にして使用して作成しています。</p> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample('Aligning_text_to_a_gradient', 600, 230)}}</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-image-threshold-property', 'shape-image-threshold')}}</td> + <td>{{Spec2('CSS Shapes')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.properties.shape-image-threshold")}}</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("<basic-shape>")}}</li> + <li>{{cssxref("shape-outside")}}</li> + <li>{{cssxref("shape-margin")}}</li> +</ul> |