【24】要素を切り抜き表示する clipプロパティ（非推奨ですが）

clipプロパティは、要素を切抜き表示（クリッピング）するためのもの。
ですが、実はもう「deprecated（非推奨・廃止予定）」になっています。

代わりに勧告候補になっている clip-pathプロパティ は、SVGパスも使えます。
ただ、主要なブラウザで未実装だったり、部分的サポートだったり、今すぐ使えわけでもないようです。（2018年1月記）
いっぽうこの clipプロパティは、CSS2.1で勧告されたプロパティなので、今のところ、どのブラウザでも表示します（非推奨ではありますが）

そんなわけで、一応この clipプロパティを紹介しておきます。

本日のINDEX

1. clipプロパティの値
2. clipプロパティの切抜きは四角形のみ
3. 位置や余白をどうにかする指定も必要

参考：
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification - W3C First Public Working Draft 12 April 2016
ここで非推奨（deprecated）とされています↓
CSS Masking Module Level 1 | W3C Candidate Recommendation, 26 August 2014

clipプロパティの値

clipプロパティは、Absolutely positioned elements（絶対位置指定された要素）のみに指定できます。position: absolute か、position: fixed を指定された要素だけが対象です。

position: absolute については、【22-2】要素を絶対位置に指定する position: absolute を、
position: fixed については、【22-3】要素を固定位置に指定する position: fixed をご覧ください。

auto	これがデフォルト値。切り抜きされず、全体が表示されます。
rect(上,右,下,左)	要素の左上の角を基点に、上右下左の順で、それぞれの距離を単位を付けた数値で、「,（カンマ）」で区切って指定します。 （IE7以下は「,」でなく「半角スペース」で区切りますが、もう古すぎてどうでもいいよね）
inherit	親要素のclipプロパティの値を継承します。

この他「 inset()」という値もあったのですが、仕様に載っていないので略しました。
一般的なブラウザは「rect( )」の仕様で実装しているはず。

値の継承	なし	適用できる要素	絶対位置指定された要素 （position: absolute か position: fixed を指定された要素）

clipプロパティの切抜きは四角形のみ

とにかく使ってみます。下の画像をこのようにクリップしてみます。

clipプロパティは、四角形でしか切り抜けないんです。（丸とかで切り抜きたくても無理）
値は rect(上, 右, 下, 左) で、要素の左上の角を基点に、そこからの距離を指定します。
今回のサンプルは下記の数値で切り抜きます。

その前に、position指定が必要です。
サンプルでは、<img>要素を 親要素 <div> の中に入れ、親要素には position: relative を、子の <img> には position: absolute を指定しました。

そして <img>要素に clip: rect(100px, 600px, 380px, 40px) と指定します。

プレビューは下のようになります。
わかりやすいように親要素<div> の背景を薄いグレーにしました。
ちゃんと切り抜けてるけど、余白はそのままですね。

HTML と CSS はこちら。

<div class="smp1">
<img src="image/img.jpg">
</div>

<style>
.smp1 {
	position:relative;  /*子要素（img）に absolute を指定するので*/
    height:400px;       /*子要素が absolute なので親に高さが無いと他の要素が上がっちゃう*/
    background:rgba(204,204,204,.2)} /*背景を薄いグレーにしています*/
.smp1 img {
	clip:rect(100px, 600px, 380px, 40px);
	position:absolute}  /*「absolute」か「fixed」じゃないと無効*/
</style>

位置や余白をどうにかする指定も必要

まずは、位置をなんとかします。親要素の左上方向に画像をずらします。
<img>要素に topプロパティと leftプロパティで「top: -100px; left: -40px」と指定するか、
<img>要素にネガティブマージンで「margin: -100px 0 0 -40px」と指定します。

CSS はこちら。（HTMLはさっきと同じです）

.smp1 {
	position:relative;
    height:400px;
    background:rgba(204,204,204,.2)}
.smp1 img {
	clip:rect(100px, 600px, 380px, 40px);
	position:absolute
    top:-100px;  /*上にずらす*/
	left:-40px;  /*左にずらす*/
    }
	/*margin: -100px 0 0 -40px  ←またはネガティブマージンでもOK*/

次に、余白を無くします。
これは、親の <div>要素のサイズを 切抜き後の画像のサイズにするだけ。

CSS はこちら。（HTMLはさっきと同じです）

.smp1 {
	position:relative;
    background:rgba(204,204,204,.2);
    width:560px;
	height:280px}
.smp1 img {
	clip:rect(100px, 600px, 380px, 40px);
	position:absolute
    margin: -100px 0 0 -40px}

この場合、子要素 <img>が position: absolute なので、親の幅は「0」でも可。高ささえ切り抜いた画像と同じならOK。

このように clipプロパティは、Photoshopなどの画像編集アプリケーションを持っていなくても、CSSだけで画像を切り抜けて便利なのですが、
・絶対位置指定された要素にしか使えない
・四角形でしか切り抜きできない
と言うデメリットもあります。
新しく登場している clip-pathプロパティ は、上記のデメリットが無いのでイイ感じ。

次回予告

というわけで次回は、 clipプロパティの代わりになる clip-pathプロパティを使ってみます。
こちらは 円やポリゴン（星型とか多角形とか）での切抜きも用意されていて、SVGのパスで自由に切り抜くこともできます。
ロゴマークなどの自由な形で画像を切り抜けるので便利です。