ウェブランサー

clip - ボックスを切り抜き表示(クリッピング)する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 絶対配置を指定された要素
継承 しない

clipプロパティは、要素を切り抜き表示したい場合(クリッピング)に使用します。 切り抜かれた外側の部分については、overflowプロパティで表示方法を指定します。

CSS2の仕様で指定できる切り抜きの形状は矩形のみです。 尚、clipプロパティによる指定は、positionプロパティで[absolute]か[fixed]が指定されている場合に有効となるようです。

切り抜き領域はボックスと同じ大きさ・形になります。[top, right, bottom, left]という4つの値によって、ボックスの各辺からの距離を指定します。

clipに与えられる値

clip: auto;
切り抜きは行われません。
clip: rect;
ボックスの上右下左それぞれの端から内側への距離を、数値に単位をつけて指定出来ます。
※現在、ボックスの左上を基準として上右下左のそれぞれの距離を指定する仕様のブラウザが多いようです。

clipの使用サンプル

CSS
.box_sample {
 position: relative;
 height: 300px;
 border: 1px solid #333333;
 padding: 5px;
}
.sample01 {
 position: absolute;
 top: 30px;
 left: 30px;
 clip: rect(20px, 200px, 100px, 20px);
}
XHTML
<div class="box_sample">
元画像です。<br />
<img src="images/sample_img300-200.png" alt="" />
</div>

<div class="box_sample">
[clip:rect(20px, 200px, 100px, 20px);]<br />
<img src="images/sample_img300-200.png" alt="" class="sample01" />
</div>
表示確認
元画像です。
[clip:rect(20px, 200px, 100px, 20px);]

clipに関連するCSSプロパティ

要素の表示や配置方法
alignment-adjust 要素の水平位置を揃える基準を指定する
alignment-baseline 要素の水平位置を揃える際に親要素との相対関係に基いて指定する
bottom positionに従って要素を配置する際に、底辺からの距離を指定する
clear 要素の回り込み(float)を解除する
clip 要素の回り込み(float)を解除する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left positionに従って要素を配置する際に、左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-style 要素からはみ出した内容の表示スタイルを指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right positionに従って要素を配置する際に、右辺からの距離を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する
zoom 要素の表示倍率(拡大・縮小)を指定する