Showtime a little

普通に画像を貼り付ける場合

今回使用する画像の元のサイズがこれ。16×16のアイコン

で、使用するのはこれ。
あんまでかくしすぎてもファイルサイズがでかくなるし、
等倍で見たときそれなりに見れればいいらしいのでとりあえず2倍の大きさの画像を、縮小して表示してみる。

<div class="smp1">
	<p><a href="javascript:void(0);"><img src="bkado301.png">テストテキスト</a></p>
</div>

.smp1 img	{
	width: 16px;
	height: 16px;
}

iPod touchでの拡大スクリーンショット。

若干ドットの角がマシに。

CSSで背景画像に指定する場合

アイコン画像はさっきのとおんなじの。

<div class="smp2">
  <p><a href="javascript:void(0);">テストテキスト</a></p>
</div>

.smp2 a{
	display:inline-block;
	padding-left:17px;
	height:16px;
	line-height:16px;
	background:url('bkado301.png') no-repeat 0 0;　/*背景画像指定*/
	background-size:16px 16px;　/*背景画像サイズ*/
	-moz-background-size:16px 16px;　/*firefox用背景画像サイズ指定。スマホならいらんかも*/
	-webkit-background-size:16px 16px;　/*webkit系用背景画像サイズ指定*/
}

iPod touchでの拡大スクリーンショット。

位置のズレは適宣直せばいいとして、一つ前のとのとだいたい同じ感じ。

CSS Spriteを使用する場合

使うスプライト画像はこれ。

上のやり方だとアイコン全部リンクの後ろにダーッと出るので別の方法。

<div class="smp3">
	<p>
	<a href="javascript:void(0);" class="my1">テストテキスト</a><br>
	<a href="javascript:void(0);" class="my2">テストテキスト</a><br>
	<a href="javascript:void(0);" class="my3">テストテキスト</a><br>
	<a href="javascript:void(0);" class="my4">テストテキスト</a><br>
	<a href="javascript:void(0);" class="my5">テストテキスト</a><br>
	<a href="javascript:void(0);" class="my6">テストテキスト</a><br>
	</p>
</div>

.smp3 a::before{
	content:''; /*.smp3内のa要素の前に何もかかれてない四角い箱を作る*/
	display:inline-block;
	width:16px;
	height:16px;
	background-image:url('sprite1.png'); /*スプライト画像を読み込む*/
	background-repeat:no-repeat;
	background-size:32px 48px;/*スプライト画像の横幅・高さをそれぞれ2分の1にして指定。*/
	-moz-background-size:32px 48px;
	-webkit-background-size:32px 48px;
}
/*それぞれのアイコンをbackground-positionで振り分ける。
　この時、画像を2分の1に縮小した後の位置で考える。
*/
.smp3 a.my1::before{
	background-position:0 0;
}
.smp3 a.my2::before{
	background-position:-16px -32px;
}
.smp3 a.my3::before{
	background-position:0 -16px;
}
.smp3 a.my4::before{
	background-position:-16px 0;
}
.smp3 a.my5::before{
	background-position:-16px -16px;
}
.smp3 a.my6::before{
	background-position:0 -32px;
}

iPod touchでの拡大スクリーンショット。

実機だともうちょいマシなんだけど、スクショを保存するときに画像が……
選んだ画像的にあんまり変わんないような気もするけどｗ
解決方法が「画像を大きくする」だし画像をツールで最適化してても多用はできない方法だけど、まあちょこっとしたあれならいいかな。