当番を忘れてて書く時間がなくなってしまったので小ネタで。。


docomoのxHTMLでHRタグで水平線を書こうとしてもどうしても思い通りにならず、ブサイクな太い線になってしまったりすることがよくあります。
そんなときに、どうするかって話。

まず、答え合わせからすると以下の画像をご確認ください。
※手元のF-08Aでの表示結果です。

上記の画像のHTMLのソースは以下のようになっています。

<h1>HRのテスト</h1>
<br />HRだけ<br />
<hr />
<br />
HRで赤い線<br />
<hr style="border-color:red; border-style:solid" />
<br />スペーサー＆divタグ<br /><div style="background-color:red"><img src="/img/1PIX.gif" width="1" height="1" /></div>
<br />

最初に書いたのがHRだけ、2つ目がborder-style:solidとか入れてみたけど大して変わらなかったパターン、3つ目が今回オススメのスペーサーGIFとDIVタグで擬似的に水平線を書いてみたパターンです。3つ目で、やっとこシュッとした細い線が書けてます。

その他、メリットとしては3キャリア共にこの表記で同じように表示されること、水平線の上下にmarginが入らないので他の部分との調整が取りやすいことなどが挙げられます。
以上、ご参考まで。