2010/03/06

[携帯, XHTML] spacer.gif ってまだまだ現役

CSSがちゃんと効いてくれるPC向けサイトと違って、
モバイルの世界はまだまだ完璧には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ソースでいく時に役に立つテクニックってやつ??