clip | CSS辞典 |

clip

ボックスを切り抜き表示（クリッピング）する

clipプロパティは、ボックスを切り抜き表示（クリッピング）する際に使用します。 CSS2の仕様で指定できる切り抜きの形状は矩形のみです。

矩形の指定方法について、CSS2の仕様では「ボックスの四辺の端から内側への距離」を指定することになっていますが、 CSS2.1では「ボックスの上辺と左辺を基準とした距離」と改定されています。一般的なブラウザではCSS2.1の仕様に準拠しています。

また、CSS2.1ではclipプロパティの適用要素が「絶対配置された要素」と改定されており、一般的なブラウザでclipプロパティによる切り抜き表示を有効にするには、 clipプロパティと同時にpositionプロパティでabsoluteかfixedを指定する必要があります。

Internet Explorer7以下では、カンマ（,）区切りではなく半角スペース区切りで値を指定しないと切り抜きされないようです。

auto
切り抜きは行われず、ボックス全体が表示されます。これが初期値です。
rect（上,右,下,左）
ボックスの左上端を基準として、上右下左のそれぞれの距離を指定します。

スタイルシート部分は外部ファイル（sample.css）に記述。
div.sample {height:200px;}
img.sample1 {clip:rect(60px,150px,130px,40px); position:absolute;}
img.sample2 {clip:rect(60px 150px 130px 40px); position:absolute;}

HTMLソース
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>

<div class="sample">
元の画像<br>
<img src="images/kaeru.gif">
</div>
<div class="sample">
画像を切り抜き表示します。（カンマ区切りで指定）<br>
<img src="images/kaeru.gif" class="sample1">
</div>
<div class="sample">
画像を切り抜き表示します。（スペース区切りで指定）<br>
<img src="images/kaeru.gif" class="sample2">
</div>

</body>
</html>

WEB技術の辞書・解説・使用例

ボックスを切り抜き表示（クリッピング）する