★このページでは、CSSの基本的な仕様について解説しています。

動作確認されているのはIE6.0のみですので、それ以外のバージョン、ブラウザでは正しく表示されない場合があります。

　

初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL12. その他の設定　その3 ★ 要素の一部を切り抜いて表示する

　

clip: <値>;

「position: absolute;」を指定した要素の一部だけを切り抜いて表示することができます。切り抜く部分の四辺を、要素全体を基準として数値で設定しますので、必ず「position: absolute;」が指定されていることが必要です。また、「clip:」を設定する時は、「overflow:」を指定しないか、「overflow: visible;（デフォルト）」に指定されている必要があります。

このプロパティに指定できる値は以下の２つです。

auto ... 全体を表示 （デフォルト）

rect（上,右,下,左） ... 四辺を指定し、四角く切り抜いて表示

四角を指定する時は、図のように要素全体から見て切り取る四辺までの距離を,で区切って順番に並べます。数値の変わりに「auto」を指定すると要素全体の四辺の位置と同じ値として解釈されます。

　

①要素全体の上辺から、切り取る四角の上辺までの距離

②要素全体の左辺から、切り取る四角の右辺までの距離

③要素全体の上辺から、切り取る四角の下辺までの距離

④要素全体の左辺から、切り取る四角の左辺までの距離

　

上の例では、CSS外部ファイルとHTMLは以下のように書かれています。

div { position: absolute; 
clip: rect(70px,auto,125px,50px); }
 <div>
<img border="0" src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

　

では、同じ画像の違う部分を切り抜いてみましょう。

元の画像

　

 　→　→　→

上の3つの例では、CSS外部ファイルとHTMLは以下のように書かれています。

body { background-color: #9B9BFF; }

div.sumple1 { position: absolute; 
clip: rect(70px,auto,125px,50px); }

div.sumple2 { position: absolute; 
clip: rect(20px,130px,125px,70px); 
left: 150px;}

div.sumple3 { position: absolute; 
clip: rect(auto,50px,100px,auto);
left: 350px; }
 		<body>

<div class="sumple1">
<p><img border="0" src="aa_linkwear_star_welcome.jpg" width="147" height="143"></p>
</div>
<div class="sumple2">
<img border="0" srcr="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>
<div class="sumple3">
<img border="0" src="aa_linkwear_star_welcome.jpg" width="147" height="143">
</div>

</body>

※「position: absolute;」を指定すると、位置に関する全ての数値は親要素（上例の場合は<body>）を基準として解釈されるので、「position: absolute;」が指定された要素を、それ自体の表示位置を指定せずに3つ並べると全て重なってしまいます。そこで実際に動作させる場合、上の例ではsumple2、sumple3に「left:」を指定して、それぞれのboxの実際の画面上での表示位置をずらしてあります。

　

※「clip:」は以上のように指定しますが、CSS本来の仕様では4つの数値は親要素の各辺から、切り取る四角の各辺までの距離を指定することになっているようです。つまり、①と④はこの通りなのですが、

②要素全体の右辺から、切り取る四角の右辺までの距離

③要素全体の下辺から、切り取る四角の下辺までの距離

となるのが仕様通りの指定方法ということになります。しかし、現在（2006年）までのブラウザではこれは正しく反映されません。

　

初級篇2.VOL12. その他の設定・その2 <<

>> 初級篇2.VOL12. その他の設定・その4

　

2007.2.26.