※2017年、スタイルシートを大幅変更しサイトをレスポンシブ化した所、このページのテスト画像(特に青とオレンジの画像)は全く表示されなくなりました。
(公開当時はそれなりに画像が見えていました。。。)
イメージスプライトのテスト。主に「携帯からどうみえるか」が確認したくてのテストです。
やっている事は
<div style="overflow: hidden; width: 60px; height: 50px;position:relative;">
<imgstyle="width: 160px; height: 389px;position:absolute;left:-50px;top:-100px" alt="テスト画像" src="https://img.tvbok.com/b/b2008/test.png" />
</div>
などと、ごく一般的な手法。
▲テスト赤
▲テスト2青
▲テスト3オレンジ
▲テスト4：4色
このページを携帯電話やPSP・スマートフォンなどなど、パソコン以外の環境から見てる方は「どう表示されているか」をコメントしてくれると嬉しいです。
1.同じ画像が4枚表示された
2.一枚目から、「赤」「青」「オレンジ」「4色混合」の違う画像が見えた
どちらかになると思います。
追記：ダメだ(￣▽￣;)
ウチのケータイから見たら、画像が上に、左に、指定位置からズレまくる(￣▽￣;)
おまけに愛用エディタとIE・Firefoxなどで表示が若干違っていて、縦横の位置を合わせるのが面倒すぎる。
上手く行けば本文中の画像も一部をimg spriteしてみるつもりだったけど、中止決定。