From b6ef6d47830a2e326211e670174fe1955ad31fa7 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 10 Nov 2021 02:36:52 +0900 Subject: CSS Masking に関するプロパティの記事を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/10 時点の英語版に同期 --- files/ja/web/css/clip/index.md | 138 +++++++++++++++++++---------------------- 1 file changed, 63 insertions(+), 75 deletions(-) (limited to 'files/ja/web/css/clip/index.md') 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 --- -
{{CSSRef}}
+{{CSSRef}} -

clip は CSS のプロパティで、要素のどの部分が可視であるかを定義します。 clip プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。

+**`clip`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のどの部分が可視であるかを定義します。 `clip` プロパティは絶対配置された要素、つまり {{cssxref("position","position:absolute")}} または {{cssxref("position","position:fixed")}} を持つ要素だけに適用されます。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 clip: auto;
 
-/* <shape> 値 */
+/*  値 */
 clip: rect(1px, 10em, 3rem, 2ch);
 
 /* グローバル値 */
 clip: inherit;
 clip: initial;
-clip: unset;
+clip: revert; +clip: unset; +``` -

構文

+## 構文 -
-

注: 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。

-
+> **Note:** 可能であれば、より新しい {{cssxref("clip-path")}} を使うことをお勧めします。 -

値

+### 値 -
-
{{cssxref("<shape>")}}
-
rect(<top>, <right>, <bottom>, <left>) 形式の矩形の {{cssxref("<shape>")}} です。 <top> と <bottom> は、ボックス境界の上辺からのオフセットを表します。<right> と <left> は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。
-
<top>、<right>、<bottom>、<left> の値は {{cssxref("<length>")}} または auto のいずれかです。auto が指定されると、その辺のボックス境界で切り取られます。
-
auto
-
要素はクリップされません (既定値)。ボックス境界で切り取る rect(auto, auto, auto, auto) とはまったく異なることに注意してください。
-
+- {{cssxref("shape")}} -

公式定義

+ - : `rect(, , , )` 形式の矩形の {{cssxref("<shape>")}} です。 `` と `` は、ボックス境界の上辺からのオフセットを表します。`` と `` は、ボックス境界の左辺からのオフセットを表します。これがボックスの中身となります。 -

{{cssinfo}}

+ ``、``、``、`` の値は {{cssxref("<length>")}} または `auto` のいずれかです。`auto` が指定されると、その辺の*内部のボックス境界*で切り取られます。 -

形式文法

+- `auto` + - : 要素はクリップされません (既定値)。ボックス境界で切り取る `rect(auto, auto, auto, auto)` とはまったく異なることに注意してください。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

画像の切り抜き

+

画像の切り抜き

-

CSS

+#### CSS -
.dotted-border {
+```css
+.dotted-border {
   border: dotted;
   position: relative;
   width: 536px;
@@ -70,7 +78,6 @@ clip: unset;
clip: rect(0, 175px, 113px, 0); } - #middle { left: 280px; clip: rect(119px, 255px, 229px, 80px); @@ -79,52 +86,33 @@ clip: unset; #bottom-right { left: 200px; clip: rect(235px, 335px, 345px, 160px); -} - -

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')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}clip プロパティを非推奨とし、代わりに {{cssxref("clip-path")}} を提案。
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.clip")}}

- -

関連情報

- -
    -
  • このプロパティは非推奨です。代わりに {{cssxref("clip-path")}} を使ってください。
    • -
  • 関連する CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}, {{cssxref("overflow")}}, {{cssxref("display")}}, {{cssxref("position")}}
    • -
+} +``` + +#### HTML + +```html +

+ + + + +

+``` + +#### 結果 + +{{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")}} -- cgit v1.2.3-54-g00ecf