元ネタは、pologの「Googleの検索結果ページは画像を一つしか読み込んでいない 」から。
う～ん。確かに凄い。
このように一つの画像から、ポジションを切って特定の場所だけを取り出すことが可能とは知らなかった。
どうやらCSSで出来るようなので、実際にやってみました。
例えば・・・
という4色に色分けした画像があって、これを白い領域だけ表示、赤い領域だけ表示と言うような事をCSSを使って実装してみたいと思います。
画像の大きさは全体で、100px × 100pxになっており、それぞれの色分けされた領域は、50px × 50pxの大きさになっています。
CSSはこんな感じ。
<html>
<head>
<style><!--
div.logo_white {
background:url(./logo.gif) no-repeat;
overflow:hidden;
height:50px;
width:50px;
position:absolute;
}
div.logo_red {
background:url(./logo.gif) no-repeat;
overflow:hidden;
height:50px;
width:50px;
position:absolute;
background-position:0 -50
}
div.logo_blue {
background:url(./logo.gif) no-repeat;
overflow:hidden;
height:50px;
width:50px;
position:absolute;
background-position:-50 0;
}
div.logo_black {
background:url(./logo.gif) no-repeat;
overflow:hidden;
height:50px;
width:50px;
position:absolute;
background-position:-50 -50;
}
--></style>
</head>
<body>
白いロゴだけを出す。<br />
<div class="logo_white"></div>
<br /><br /><br />
黒いロゴだけを出す。<br />
<div class="logo_black"></div>
<br /><br /><br />
青いロゴだけを出す。<br />
<div class="logo_blue"></div>
<br /><br /><br />
赤いロゴだけを出す。<br />
<div class="logo_red"></div>
</body>
</html>
で、実際の出力はこんな感じに。
※ 実際にこのBlogのCSSを弄って先ほどの画像の一部の領域だけを出力させています。
白いロゴだけを出す。
黒いロゴだけを出す。
青いロゴだけを出す。
赤いロゴだけを出す。
DIVタグの背景に画像を指定して、DIVタグの領域から画像の描画領域ずらす事で特定の場所だけを表示するようにしています。
例えば、画像の中から黒い部分だけを取り出すのは、DIVタグを50px × 50pxの大きさに指定して、それ以外の部分を非表示（overflow:hidden）にしてます。
次に、黒い領域は画像内で右下（上から50px、左から50px）に位置しますので、その位置まで画像の出力開始する位置をずらして（background-position:-50 -50）います。
その他にも、clipプロパティを使う事でも、画像の特定部分だけを表示すると言う事が可能です。
<html>
<head>
<style><!--
div.white_d{
position:relative;
height:50px;
width:50px;
}
img.white{
position:absolute;
clip:rect(0px 50px 50px 0px)
}
div.red_d{
position:relative;
top:-50;
height:50px;
width:50px;
}
img.red{
position:absolute;
clip:rect(50px 50px 100px 0px)
}
div.blue_d{
position:relative;
left:-50;
height:50px;
width:50px;
}
img.blue{
position:absolute;
clip:rect(0px 100px 50px 50px)
}
div.black_d{
position:relative;
top:-50px;left:-50px;
right:-50px;
height:50px;
width:50px;
}
img.black{
position:absolute;
clip:rect(50px 100px 100px 50px)
}
--></style>
</head>
<body>
白いロゴだけを出す。<br />
<div class="white_d">
<img src="./logo.gif" class="white">
</div>
<br /><br /><br />
黒いロゴだけを出す。<br />
<div class="black_d">
<img src="./logo.gif" class="black">
</div>
<br /><br /><br />
青いロゴだけを出す。<br />
<div class="blue_d">
<img src="./logo.gif" class="blue">
</div>
<br /><br /><br />
赤いロゴだけを出す。<br />
<div class="red_d">
<img src="./logo.gif" class="red">
</div>
</body>
</html>
clipプロパティは、positionプロパティが「absolute」に指定されている場合のみ有効になります。
「position」プロパティが「absolute」に指定されていると、出力位置がブラウザの左上を基点としてしか指定できないため、IMGタグをDIVタグで括ってそのDIVタグ内で「position:relative;」を指定してます。
ちょっとこちらは面倒ですね・・・。
しかし、こういう風に画像の一部を切り抜くには、そもそも画像の大きさをpx単位で予め設計して作っておかなければなりません。
それをしていたGoogleってやっぱり考え方が凄いですね・・・。
関連記事
JS/CSSファイルの圧縮にYUI Compressorを使い倒す
Webページをコマンドラインから一発でPDFや画像に変換する
[jQuery] マウスオーバー・マウスアウトで画像を表示・非表示にする方法
はてブ数の画像ってどうやって表示してんだろうって疑問に挑んでみた
ImageMagickを使ってコマンドラインからCAPTCHAを作ってみる
JavaScriptで簡単にWindowsエクスプローラー風のツリーを作れるDTree