diff options
Diffstat (limited to 'files/ja/web/css/clip/index.md')
| -rw-r--r-- | files/ja/web/css/clip/index.md | 138 |
1 files changed, 63 insertions, 75 deletions
diff --git a/files/ja/web/css/clip/index.md b/files/ja/web/css/clip/index.md index b36aacad45..2aca83b443 100644 --- a/files/ja/web/css/clip/index.md +++ b/files/ja/web/css/clip/index.md @@ -3,55 +3,63 @@ title: clip slug: Web/CSS/clip tags: - CSS - - CSS Reference + - CSS マスク + - CSS プロパティ + - 非推奨 + - リファレンス + - recipe:css-property +browser-compat: css.properties.clip translation_of: Web/CSS/clip --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`clip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のどの部分が可視であるかを定義します。 `clip` プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。 -<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */ +```css +/* キーワード値 */ clip: auto; -/* <shape> 値 */ +/* <shape> 値 */ clip: rect(1px, 10em, 3rem, 2ch); /* グローバル値 */ clip: inherit; clip: initial; -clip: unset;</pre> +clip: revert; +clip: unset; +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<div class="note"> -<p><strong>注:</strong> 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。</p> -</div> +> **Note:** 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。 -<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> +- {{cssxref("shape")}} -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + - : `rect(<top>, <right>, <bottom>, <left>)` 形式の矩形の {{cssxref("<shape>")}} です。 `<top>` と `<bottom>` は、ボックス境界の上辺からのオフセットを表します。`<right>` と `<left>` は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。 -<p>{{cssinfo}}</p> + `<top>`、`<right>`、`<bottom>`、`<left>` の値は {{cssxref("<length>")}} または `auto` のいずれかです。`auto` が指定されると、その辺の*内部のボックス境界*で切り取られます。 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> +- `auto` + - : 要素はクリップされません (既定値)。ボックス境界で切り取る `rect(auto, auto, auto, auto)` とはまったく異なることに注意してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Clipping_an_image" name="Clipping_an_image">画像の切り抜き</h3> +<h3 id="Clipping_an_image">画像の切り抜き</h3> -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush:css notranslate">.dotted-border { +```css +.dotted-border { border: dotted; position: relative; width: 536px; @@ -70,7 +78,6 @@ clip: unset;</pre> clip: rect(0, 175px, 113px, 0); } - #middle { left: 280px; clip: rect(119px, 255px, 229px, 80px); @@ -79,52 +86,33 @@ clip: unset;</pre> #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> +} +``` + +#### HTML + +```html +<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> +``` + +#### 結果 + +{{EmbedLiveSample('Clipping_an_image', '689px', '410px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- このプロパティは非推奨です。代わりに {{cssxref("clip-path")}} を使ってください。 +- 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow")}}, {{cssxref("display")}}, {{cssxref("position")}} |