REDLINE MAGAZINE | CSS 画像の一部を使う3つの方法

CSS 画像の一部を使う3つの方法

こちらの記事でCSSを利用して画像の一部分だけを表示させる3つのテクニックが載ってました。タイムリーに実務で使うかも！とか思ったのでメモがてらにエントリ。

3 Easy and Fast CSS Techniques for Faux Image Cropping | Css Globe

ちなみに上記エントリでは、これらの方法を「Faux Image Cropping」って呼んでます。私の拙い英語力ではCropって「作物」としか記憶してなくて一瞬何のこっちゃと思ったんですが、辞書引いてみると「刈る」とかいう意味もあるんですね。なるほどなるほど。

ネガティブマージンを利用する方法

まず１つ目はネガティブマージンを利用する方法。

必要条件

• 親要素に「overflow:hidden;」を指定
• 一部分を利用する画像に対してのネガティブマージンの指定

>>ネガティブマージンを利用したサンプルページ　その1

【CSS部分】
.crop{
	float:left;
	overflow:hidden;  /* これが重要 */
	border:2px solid #630;
	}
.crop img{
	margin:-20px -15px -40px -55px;　/* 位置コントロール */
	}
   
【HTML部分】
<p class="crop"><img src="090929_01.jpg" alt="サンプル画像" /></p>

一応上記サイトのソースを元にサンプルを用意したので.crop に float が入ってるけど、別にそれはなくてもいい。ただ、同ページの解説によると「親要素（ここではP）はフロートしてるはず、もしくは明確に幅が指定してあるに違いない」となってる。（英訳おかしかったらツっこんでくだせー＞＜）まぁこの方法はそのブロック要素が全幅ブロックの場合はうまくいかず不都合があるんじゃないかな、ということらしい。同じく.crop に入ってる border は画像がカットされてますっていうのを判りやすいように入れているだけなのでなくても大丈夫。ネガティブマージンの値は、自分好みの位置になるまでいじいじしまくるべし。

当然、親要素に幅・高さを指定した場合はそのサイズになる。

>>ネガティブマージンを利用したサンプルページ　その2

【CSS部分】
.crop{
	width:150px;
	height:150px;    
	overflow:hidden;  /* これが重要 */
	border:2px solid #630;
	}
.crop img{
	margin:-20px -15px -40px -55px;　/* 位置コントロール */
	}
   
【HTML部分】
<p class="crop"><img src="090929_01.jpg" alt="サンプル画像" /></p>

いろんなサイズの画像をズラーと並べて一覧みたいにしたい時はこっちの方が絶対見栄えはいいと思われ。

絶対配置を利用する方法

必要条件

• 親要素に幅・高さを必ず指定（領域確保用）
• 親要素に「position:relative;」を指定
• 親要素に「overflow:hidden;」を指定
• 一部分を利用する画像に対しての「position:absolute; 」と位置の指定

>>絶対配置を利用したサンプルページ

【CSS部分】
.crop{
	float:left;
	overflow:hidden; /* これが重要 */
	position:relative; /* これが重要 */
	border:2px solid #630;
	width:150px;
	height:150px;
	}
.crop img{
	position:absolute; /* 絶対配置で位置コントロール */
	top:-20px;
	left:-55px;
	}
   
【HTML部分】
<p class="crop"><img src="090929_01.jpg" alt="サンプル画像" /></p>

ここでも.crop に floatは別に必ず必要なものではないけど一応入れてみた。親要素に幅や高さを指定が必ず必要なのは position を利用するので、表示の領域確保用。幅・高さの指定がなかったらスペースが詰まって画像消えちゃうと思う。該当画像に対しては position:absolute; を指定して親要素からの位置合わせを。

Clipプロパティを利用する方法

必要条件

• 親要素に幅・高さを必ず指定（領域確保用）
• 親要素に「position:relative;」を指定
• 一部分を利用する画像に対しての「position:absolute; 」と位置の指定
• 一部分を利用する画像に対して「clip」の指定

>>Clipプロパティを利用したサンプルページ

【CSS部分】
.crop{
 	float:left;
 	position:relative;
	width:150px;
	height:150px;
	border:2px solid #630;
	}
.crop p{
	margin:0;
	position:absolute;
	top:-20px;
	left:-55px;
	clip:rect(20px 205px 170px 55px);
	}	
   
【HTML部分】
<div class="crop">
<p><img src="http://redline.hippy.jp/images/090929_01.jpg" alt="サンプル画像" /></p>
</div>

親要素に幅・高さを与えるのはその分の領域を確保しておかないと詰まってスペースがなくなっちゃうのを回避するため。クリップされる要素に position:absolute; を指定するのは、それを指定しないと clip が有効にならないため。

ややこしいのは clip のrect で指定する値。並びは margin やら padding といったプロパティと同じ上右下左の順番。ただ、それらが上右下左の各点の端から距離を計算すればいいのに対して、clip は右と下の値に左・上からそこまでの距離を指定する必要がある。日本語難しいから図にするとこんな感じ。（↓）

clipプロパティについてはこちら。

clip CSS 表示と配置
clip－スタイルシートリファレンス

CSS2とCSS2.1でちょこっと仕様が違うみたい。『CSS2 では半角スペース、またはカンマ（,）のどちらかで区切って指定することになっていましたが、CSS2.1 ではカンマ（,）で区切らなければなりません。ただし、現状では CSS2 仕様に準拠している UA が多いことと、Windows版Internet Explorer 6 においては「top」「right」「bottom」「left」の部分に対応する値をカンマ（,）区切りにすると、表示に反映されないので、CSS2 仕様の半角スペース区切りによる指定を行う方が無難です。』とのことで、今のところ値の区切りは半角スペースでよさそう。IE6以外ではどっちでも問題ない。

おまけ

そういえば随分前にこんなエントリも書いた。遊びだけどもしよかったら･･･。

RedLine Magazine : CSSで文字サイズに画像サイズを合わせる

2009年09月28日 12:49 | Red | パーマリンク