aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/css/clip/index.html
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-11-09 23:48:02 +0900
committerMasahiro FUJIMOTO <mfujimot@gmail.com>2021-11-20 22:35:37 +0900
commit684f3a1f7c141b4d1c522687062ff0e6e2e1a080 (patch)
tree3798639490bef357508feadef36e1bee7860cf3e /files/ja/web/css/clip/index.html
parent0fade6a001e0275bd20326c6ac6e04a759bb8cd0 (diff)
downloadtranslated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.tar.gz
translated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.tar.bz2
translated-content-684f3a1f7c141b4d1c522687062ff0e6e2e1a080.zip
CSS Masking のプロパティの文書を変換準備
Diffstat (limited to 'files/ja/web/css/clip/index.html')
-rw-r--r--files/ja/web/css/clip/index.html130
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;
-
-/* &lt;shape&gt; 値 */
-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("&lt;shape&gt;")}}</dt>
- <dd><code>rect(&lt;top&gt;, &lt;right&gt;, &lt;bottom&gt;, &lt;left&gt;)</code> 形式の矩形の {{cssxref("&lt;shape&gt;")}} です。 <code>&lt;top&gt;</code> と <code>&lt;bottom&gt;</code> は、ボックス境界の上辺からのオフセットを表します。<code>&lt;right&gt;</code> と <code>&lt;left&gt;</code> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。</dd>
- <dd><code>&lt;top&gt;</code>、<code>&lt;right&gt;</code>、<code>&lt;bottom&gt;</code>、<code>&lt;left&gt;</code> の値は {{cssxref("&lt;length&gt;")}} または <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">&lt;p class="dotted-border"&gt;
- &lt;img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Original graphic"&gt;
- &lt;img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to upper left"&gt;
- &lt;img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped towards middle"&gt;
- &lt;img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Graphic clipped to bottom right"&gt;
-&lt;/p&gt;</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>