<hr>の代わりに画像をラインに使う ～3キャリア共通デザイン～

<hr>は手軽に罫線が引ける便利なタグではありますが、先日の記事でも触れたように、<hr>で表示される罫線の太さはキャリアや機種によって変わってきます。

【参考記事】超簡単な３キャリアの違いのまとめ

PCサイトの場合、size属性で線の太さを調整できますが、携帯サイトでは無効になる場合が多いです。

そうなると、3キャリア共通のページを作成していた場合に、デザインが微妙に変わってきます。

そこで、３キャリアでなるべくデザインを統一させるためのテクニックをご紹介します。

１）ライン画像を使う（その１）

こんな感じで、1x7ピクセルの画像を作り、真ん中に線で使う色で点を入れます。
これをHTMLで表示させる際に、width属性を240などにしてやれば、細い１ピクセルの線を表示できます。

２）ライン画像を使う（その２）

こんな感じで、点線などを使いたい場合は、240x7ピクセルの画像を作成しよう。

３）背景色を使う
これはちょっと上級者向けかな～
XTML限定になりますが、透過GIFの極小画像を使って、<div>の背景色で罫線を引きます。
これを使う利点は、画像が読み込めなくても罫線が表示されるということと、サイズの節約になることでしょうか。
一応、ソースを書いておきます。

<div style="background-color:罫線の色;"><img src="img/spacer.gif" width="1" height="1" alt="" /></div>

【関連記事】
画像サイズに注意 ～容量オーバーの罠～
【オススメ本】携帯サイト　コーディング＆デザイン