ボックスのある範囲が切り抜き表示されるclipプロパティ
clip

 clipプロパティは、ボックスのある範囲を切り抜き表示(クリッピング)する際に使用します。

 CSS 2.1の仕様では、設定できる形状は矩形のみです。

基本データ

構文 セレクタ{clip: 値;}
継承 ×
「rect(上,右,下,左)」「auto」
効果 ボックスのある範囲が切り抜き表示される
初期値 auto
適用個所 positionプロパティで「absolute」か「fixed」が設定された要素

例:ページの右下を見てください。鳥マークの画像が出てています

<img src="/fwcr/design/cssref/images/gt.gif" style="position: fixed; left : 850px; bottom: 30px; clip: rect(5px, 40px, 50px, 5px);">

動作Webブラウザ

Internet Explorer IE 4以上
Firefox 全バージョン
Safari全バージョン
OperaOpera 6以上
Chrome全バージョン
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.clip

jQueryを使った参照方法

$('【セレクタ】').css('clip','【値】');
$('【セレクタ】').css({'clip':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間