clipプロパティ

TOPページに戻る > CSS

clipプロパティ

要素を一部を切り抜いて表示することができます
positionプロパティでabsoluteを指定した要素に適用できます 値はrect(上,右,下,左)で指定します。上からの距離、右は切り取る右辺までの左からの距離、下は切り取る下辺までの上からの距離、左からの距離を指定します
値の数値指定の部分はカンマで区切ることになっていますがIE7以下が対応していません、半角空白で区切るようにするとIE7以下にも対応できます
画像の切り抜きに使われることが多いようです

使い方（書式）CSS2.1の仕様

セレクタ { clip: rect(上,右,下,左); }                                    

使い方（書式）CSS2の古い仕様、IE7以下に適用するには半角空白で区切ってください(IE7のシェアがまだある場合はこっちで)他のブラウザもこっちでも表示できます

セレクタ { clip: rect(上 右 下 左); }                                    

clipプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素(positionプロパティでabsoluteを指定した要素)
子要素へのスタイルの継承	しない

プロパティの値	説明
rect(上,右,下,左)	要素を切り抜く表示位置を指定
auto	切り抜きなし。初期値

実際の指定方法

.hoge {
 width: 300px;
 height: 100px; 
 bordor:solid 1px;
  }

.hoge2 {
 clip: rect(20px 80px 80px 30px);  /* 切り抜く範囲を指定 */
 position: absolute;               /* ページの内で自由に配置できるようにする */
 width: 300px;
 height: 100px; 
 bordor:solid 1px;
  }

html部分

<div class="hoge2"><br>
今日はねとってもいいお天気なの<br>
絶好のさんぽ日和なのよ<br>
うち、まじよ</div>

切り抜く前のテキスト

切り抜いた部分 clip: rect(20px 80px 80px 30px);