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

TOP > CSS >  CSS辞典 > clip
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>