phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。
いきなりですが、サンプル。
通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。
ソースは下記。まずは XHTML ソース。
<p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p>
CSS は下記のとおり。今回のサンプルは画像のサイズが、240px × 180px という前提です。
p.clipSample {
position: relative;
top: 0;
left: 0;
}
p.clipSample a img {
position: absolute;
top: 0;
left: 0;
clip: rect(50px 125px 125px 50px);
}
p.clipSample a:hover {
border: none;
}
p.clipSample a:hover img {
clip: rect(0 240px 180px 0);
}
clip プロパティは、ちょっと仕様が複雑で、CSS2 では
Value: <shape> | auto | inherit
Initial: auto
Applies to: block-level and replaced elements
Inherited: no
Percentages: N/A
Media: visual
The 'clip' property applies to elements that have a 'overflow' property with a value other than 'visible'. Values have the following meanings:
対象となるのが、ブロックレベル要素と、置換要素（ただし、overflow プロパティに visible 以外の値をもつもの） となっていますが、CSS 2.1 では、
Value: <shape> | auto | inherit
Initial: auto
Applies to: absolutely positioned elements
Inherited: no
Percentages: N/A
Media: visual
となって、position プロパティに absolute を値としてもつ要素が対象となっています。IE6 以降等、現在の主要ブラウザでは、対象となる要素に関してこの CSS 2.1 の仕様に従っているようです。
ちなみに、<shape> は切り抜く形状の指定ですが、CSS 2.1 では、矩形 （rect） のみ指定可能です。よって、
clip: rect(50px 125px 125px 50px);
のような指定になります。
各数値は、切り出す領域を指定するものですが、これも注意が必要です。まず、書き方ですが、CSS 2.1 では
clip: rect(50px, 125px, 125px, 50px);
という、カンマ区切りでの指定になりますが、CSS2 では、空白区切りも使用できます。しかし、IE6 ではカンマ区切りにすると指定が反映されないため、空白区切りで書くようにしましょう。
また、各数値ですが、左から順に、上、右、下、左の切り出し領域を指定していますが、これの指定の仕方も CSS2 と CSS 2.1 では異なるので注意が必要です。CSS2 では、指定する値が上下左右の端からの距離になるのに対し、CSS 2.1 では、上下は上端、左右は、左端からの距離になります。
つまり、100px × 100px の画像があったとして、CSS2 では、
clip: rect(0 0 0 0);
とした時、全体表示になりますが、CSS 2.1 では、
clip: rect(0 100px 100px 0);
とした時、全体表示となるわけです。
こちらの指定は、CSS 2.1 にしたがって記述すれば、主要ブラウザで問題は発生しません。ちょっと面倒ですが、これさえ覚えておけばおそらく大丈夫です。
ちなみに、サンプル内の、
p.clipSample a:hover {
border: none;
}
は、一見いらなそうですが、IE6 ではこれがない状態で、
p.clipSample a:hover img {
clip: rect(0 240px 180px 0);
}
を書いたら、正常に動作しなかったので、入れてあります。
2月21日 下記を追記
clip プロパティには auto という値もあるので、Firefox 等が対象なら、
p.clipSample a:hover img {
clip: auto;
}
でも問題ないです。auto は、超簡単にいえば切り抜きをしないってことです。ただ、試した限り IE では動作しなかったので、今回のサンプルでは、全表示の際も数値を指定しています。
