diff options
Diffstat (limited to 'files/ja/web/css/clip/index.html')
| -rw-r--r-- | files/ja/web/css/clip/index.html | 132 |
1 files changed, 132 insertions, 0 deletions
diff --git a/files/ja/web/css/clip/index.html b/files/ja/web/css/clip/index.html new file mode 100644 index 0000000000..cc9e9a3e1b --- /dev/null +++ b/files/ja/web/css/clip/index.html @@ -0,0 +1,132 @@ +--- +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> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<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> + +<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.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> |