備忘録的プログラミングリファレンス

clipプロパティ

 clipプロパティは、エレメントの表示領域を指定するプロパティです。 画像などの一部を切り取ったような表現ができます。画像の一部を拡大表示するといった表現にも応用できます。
 clipプロパティは、エレメントが絶対位置position:absolute;またはposition:fixed;でなければなりません。 元の大きさをwidthheightプロパティで指定しておきます。大きさとしてはrect(top, right, bottom, left)というように領域で指定します。

 エレメントがoverflow:visible;ではclipプロパティは機能しません。

エレメントの一部を表示
position: absolute;
width: 200px;
height: 200px;
clip: rect( 0px, 150px, 200px, 0px );

 *clipプロパティは非推奨で、将来的にはclip-pathプロパティに置き換えられます。

構文(Syntax)

CSS

clip: auto | rect(top,right,bottom,left) | initial | inherit ;

DOM(JavaScript)

値の取得
String = object.style.clip;
値の設定
object.style.clip=" auto | rect(top,right,bottom,left) | initial | inherit ";

値(Values)

Value摘要
auto初期値(default値)、元の大きさで表示
rect(top,right,bottom,left)範囲を数値で設定
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)auto
継承(Inherited)no
変化(Animatable)yes

Example

 clipの例です。 左側はclipプロパティを設定しない場合の表示です。 右側はclipプロパティを設定した場合の表示です。
 エレメントをposition:absolute;またはposition:fixed;の絶対位置に、widthheightプロパティで大きさを指定しておく必要があります。
 clipプロパティは、赤いborder線が見えていないことからエレメントの一部を表示していることが分かります。