トップページ > スタイルシートリファレンス > clip

★スタイルシートリファレンス

clip …… ボックスを切り抜き表示(クリッピング)する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

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>
↓↓↓

ブラウザ上の表示

元の画像
画像を切り抜き表示します。(カンマ区切りで指定)
画像を切り抜き表示します。(スペース区切りで指定)

■関連項目

CSSで画像をトリミングする
overflow …… はみ出た内容の表示方法を指定する
overflow-x …… はみ出た内容の表示方法を指定する(IE独自の仕様)
overflow-y …… はみ出た内容の表示方法を指定する(IE独自の仕様)
position …… ボックスの配置方法(基準位置)を指定する
top …… 上からの配置位置(距離)を指定する
bottom …… 下からの配置位置(距離)を指定する
left …… 左からの配置位置(距離)を指定する
right …… 右からの配置位置(距離)を指定する
display …… 要素の表示形式(ブロック・インライン・フレックス等)を指定する
float …… 左または右に寄せて配置する
clear …… 回り込みを解除する
z-index …… 重なりの順序を指定する
visibility …… ボックスの表示・非表示を指定する
clip …… ボックスを切り抜き表示(クリッピング)する
direction …… 文字表記の方向(左右)を指定する
unicode-bidi …… Unicodeの文字表記の方向を上書きする
writing-mode …… 文字表記の方向(縦横)を指定する(IE独自の仕様)
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ