Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

clip

ボックスをクリッピング(切り抜き)して表示するかどうかを指定します。

この『clip』プロパティは『position』プロパティが『absolute』もしくは『fixed』と指定されている要素にのみ反映させることができます。

サンプルコード

div.test { clip: auto;}
div.test1 { clip: rect(10px, 20px, 30px, 40px);}

指定可能な値一覧

値	概要
auto	切り抜きは行いません。この『auto』が初期値です。
rect()	ボックスの左上を基準とした位置で指定します。記述方法は『rect(上からの距離, 左から右端への距離, 上から下端への距離, 左からの距離)』となります。

ブラウザでの表示結果

<div style="clip: auto; position: absolute; background-color: yellow; width: 200px; height: 200px;">横幅200px、高さ200pxのdiv要素です。『position: absolute』と指定しています。</div>

<div style="clip: rect(5px, 195px, 195px, 5px); position: absolute; background-color: yellow; width: 200px; height: 200px;">横幅200px、高さ200pxのdiv要素です。『position: absolute』と指定しています。</div>

<div style="clip: rect(5px, 195px, 195px, 5px); position: fixed; background-color: yellow; width: 200px; height: 200px;">横幅200px、高さ200pxのdiv要素です。『position: fixed』と指定しています。</div>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

7 以降 ○

6 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

概要

ボックスをクリッピング(切り抜き)して表示するかどうかを指定します。

この『clip』プロパティは『position』プロパティが『absolute』もしくは『fixed』と指定されている要素にのみ反映させることができます。

『rect()』の記述方法は『rect(上からの距離, 左から右端への距離, 上から下端への距離, 左からの距離)』となります。値の区切りは『,』もしくは半角スペースが使用できますが、文法的に標準とされているのは『,』となりますので『,』を使用したほうが良いでしょう。ただし、『IE7』以下のブラウザでは区切りは半角スペースのみしか使用できませんのでご注意ください。

div.test { clip: rect(10px, 20px, 30px, 40px);} /* こちらが標準です。 */
div.test1 { clip: rect(10px 20px 30px 40px);} /* IE7以下はこちらを使用してください。 */

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ