モバイルの世界はまだまだ完璧にはCSSが使えないことも多い。
margin とか padding だって指定出来ない端末もある。
じゃあ、どうするの？
たとえば、
<div style="background-color:#FF0000"> <a href="hoge.htm" style="color:#FFFFFF">リンク</a> </div>
ってすると、赤背景にしろ文字リンクが出来ます。
そして、背景と文字の高さが一緒で、非常にキツキツなイメージ。
デザイナーが考えたページイメージとはかけはなれた代物になるでしょう。
div に padding を設定すればいいだけに思えますが、それが出来ないモバイル事情。
なので擬似 padding として spacer.gif を使います。
spacer.gif は 1px * 1px の透明透過 gif を使います。
<div style="background-color:#FF0000"> <div style="heiht:5px"><img src="spacer.gif" width="1" height="5"> <a href="hoge.htm" style="color:#FFFFFF">リンク</a> <div style="heiht:5px"><img src="spacer.gif" width="1" height="5"> </div>
こうすることで、リンクの上下に 5px 分の隙間があいて、見やすくなることでしょう。
img タグを div で囲んだのは、ソフトバンク機種でimg タグの height 要素が無視されてしまった
ため、入れてあります。
3キャリア1ソースでいく時に役に立つテクニックってやつ？？