diff options
Diffstat (limited to 'files/ja/web/css/clip/index.html')
| -rw-r--r-- | files/ja/web/css/clip/index.html | 130 |
1 files changed, 0 insertions, 130 deletions
diff --git a/files/ja/web/css/clip/index.html b/files/ja/web/css/clip/index.html deleted file mode 100644 index b36aacad45..0000000000 --- a/files/ja/web/css/clip/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: clip -slug: Web/CSS/clip -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/clip ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary"><strong><code>clip</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のどの部分が可視であるかを定義します。 <code>clip</code> プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。</span></p> - -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ -clip: auto; - -/* <shape> 値 */ -clip: rect(1px, 10em, 3rem, 2ch); - -/* グローバル値 */ -clip: inherit; -clip: initial; -clip: unset;</pre> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<div class="note"> -<p><strong>注:</strong> 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。</p> -</div> - -<h3 id="Values" name="Values">値</h3> - -<dl> - <dt>{{cssxref("<shape>")}}</dt> - <dd><code>rect(<top>, <right>, <bottom>, <left>)</code> 形式の矩形の {{cssxref("<shape>")}} です。 <code><top></code> と <code><bottom></code> は、ボックス境界の上辺からのオフセットを表します。<code><right></code> と <code><left></code> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。</dd> - <dd><code><top></code>、<code><right></code>、<code><bottom></code>、<code><left></code> の値は {{cssxref("<length>")}} または <code>auto</code> のいずれかです。<code>auto</code> が指定されると、その辺のボックス境界で切り取られます。</dd> - <dt><code>auto</code></dt> - <dd>要素はクリップされません (既定値)。ボックス境界で切り取る <code>rect(auto, auto, auto, auto)</code> とはまったく異なることに注意してください。</dd> -</dl> - -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Clipping_an_image" name="Clipping_an_image">画像の切り抜き</h3> - -<h4 id="CSS">CSS</h4> - -<pre class="brush:css notranslate">.dotted-border { - border: dotted; - position: relative; - width: 536px; - height: 350px; -} - -#top-left, -#middle, -#bottom-right { - position: absolute; - top: 0; -} - -#top-left { - left: 360px; - clip: rect(0, 175px, 113px, 0); -} - - -#middle { - left: 280px; - clip: rect(119px, 255px, 229px, 80px); -} - -#bottom-right { - left: 200px; - clip: rect(235px, 335px, 345px, 160px); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush:html notranslate"><p class="dotted-border"> - <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic"> - <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"> - <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"> - <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"> -</p></pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}}</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 Masks', '#clip-property', 'clip')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td><code>clip</code> プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。</td> - </tr> - <tr> - <td>{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}</td> - <td>{{Spec2('CSS2.1')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.clip")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>このプロパティは非推奨です。代わりに {{cssxref("clip-path")}} を使ってください。</li> - <li>関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow")}}, {{cssxref("display")}}, {{cssxref("position")}}</li> -</ul> |