HTML5 & CSS3 リファレンス - crop プロパティ（置換要素の表示範囲の指定）

CSS3: crop プロパティ - 置換要素の表示範囲の指定

■ 概要

項　　目	説　　明
記述形式	セレクタ {crop: 値 }
値の形式	auto \| rect(上, 右, 下, 左) \| inset(上, 右, 下, 左)
初期値	auto
対応ブラウザー	C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素	置換要素
継　　承	しない

■ 解説

crop プロパティ は，置換要素の表示範囲 を指定します。

指定できる値の形式は，以下のとおりです。

値	説　　明
auto	切り抜き表示を指定せず，通常通り表示します。　（初期値）
rect(上, 右, 下, 左)	切り抜く長方形領域を，上と下はボックスの上端からのオフセット左と右はボックスの左端からのオフセットで指定します。
inset(上, 右, 下, 左)	基本的には， rect( ) と同様に長方形領域を指定します。ただし，上はボックスの上端からのオフセット右はボックスの右端からのオフセット下はボックスの下端からのオフセット左はボックスの左端からのオフセットで指定します。
備　　考	rect( ) と inset( ) では，負の値も指定可能です。上, 右, 下, 左の値はカンマで区切って並べます。長さ以外に auto キーワードも指定可能です。　auto を指定すると 0 を指定したのと同様になります。

置換要素 とは属性等に入力される値によって内容が置き換えられ，それの寸法（サイズ）で認識される要素のことです。　具体的には img要素，input要素， object要素，select要素，textarea要素の 5つを指します。

■ 使用例（ crop プロパティの利用）

HTMLソース
CSS <head> ～ </head>	<style type="text/css" media="screen, handheld, print, tv" > <!-- .crop0 { crop: none; } .crop1 { crop: rect(20px, 130px, 100px, 30px); } .crop2 { crop: inset(0px, 60px, 60px, 0px); } --> </style>
	= 'HTML <body> ～ </body>'; <div class="i" style="position:relative;"> <img class="crop0" src="../how2/colosseo.jpg"> <img class="crop1" src="../how2/colosseo.jpg"> <img class="crop2" src="../how2/colosseo.jpg"> </div>

HTMLソース

CSS
<head> ～ </head>

<style type="text/css" media="screen, handheld, print, tv" >
   <!--
      .crop0 { crop: none; }
      .crop1 { crop: rect(20px, 130px, 100px, 30px); }
      .crop2 { crop: inset(0px, 60px, 60px, 0px); }
   -->
</style>

 = 'HTML
<body> ～ </body>';
 <div class="i" style="position:relative;">
    <img class="crop0" src="../how2/colosseo.jpg">
    <img class="crop1" src="../how2/colosseo.jpg">
    <img class="crop2" src="../how2/colosseo.jpg">
 </div>

ブラウザー表示例　（未対応のブラウザーでは正しく表示できません）

■ 備考

【参考ページ】

「HTMLクイックリファレンス」の「crop プロパティ」のページ
「ねこだまのCSSリファレンス&デモ」の「crop プロパティ」のページ
「W3C」の「crop プロパティ」のページ