ケータイサイトにおける水平線実装の3つの方法

2009.12.23

Hacks

ケータイサイトのデザイン上、同一ページ内でコンテンツを区切るためによく使われる水平線(hrタグ)。

単純にhrタグを用いるのが旧来のやり方ではあったのですが、XHTML対応が進んだ今では、それ以外の実装方法もあったりします。

というわけで、代表的というか多分これしかないと思う3つをご紹介。

hrタグを使う

これが昔から一番オーソドックスな方法。
今でも多いですが、ページのタイトルとページの本文を分けて見せる場合がこちら。

<body style="background-color:#ffffff;" bgcolor="#ffffff">
<div style="text-align:center;">サンプルテキスト</div>
<hr style="background-color:#000000;" color="#000000">
基本的な手法として･･･

このhrタグは、キャリアによって動作がだいぶ異なるのがやっかいなところなんですよね。

また、docomoだけに限ってもiモードブラウザ2.0の場合、

サンプル画像のように、水平線の上下に0.5emずつのマージンがとられる仕様となっていて、意図したデザインにならない場合があります。
上下に対するマージンはSoftBankでも同様ですが、SoftBankの場合はmargin/paddingプロパティで調整できるんですよね。docomoはできないというのに･･･。

画像を用いる

デザイン的に3キャリアで崩れさせないようにするということであれば、画像を用いるのがベターではないでしょうか。

<body style="background-color:#ffffff;" bgcolor="#ffffff">
<div style="text-align:center;">サンプルテキスト</div>
<div style="text-align:center;"></div>
基本的な手法として･･･

この場合画像のサイズに気を付ける必要があります。
横幅が240px以下のブラウザも多いため、環境によっては画像が潰れて表示されることで、思ったようなデザインにならない可能性があるんです。

画像を使うのであれば220px以下で用意してあげたほうがいいでしょう。
しかし、画面を分断するだけの長さがありませんから、その場合は次の方法で対応するのがいいかもしれません。

スペーサーを使う

最近のケータイサイトのデザイン上、うまく余白をとるために1px四方の透過GIFを用いることが多いですが、これとdivを使って、hrタグに近い見栄えの水平線を実装することが出来ます。

<body style="background-color:#ffffff;" bgcolor="#ffffff">
<div style="text-align:center;">サンプルテキスト</div>
<div style="background-color:#000000;"><img src="/img/spacer.gif" width="1px" height="1px" /></div>
基本的な手法として･･･

divに背景色を指定してやることで、画面を分断できるだけの長さを持つ水平線を実装することが可能になります。
この方法であればhrと違って上下に大きくマージンがとられることもありません。

ただ、auの場合、連続したdivタグがあると、間に1pxの隙間が空いてしまうというめんどくさいところがあるので、

<div style="text-align:center;">
サンプルテキスト
<div style="background-color:#000000;"><img src="/img/spacer.gif" width="1px" height="1px" /></div>
</div>

と入れ子でコーディングしてやればOK。これは2の方法の場合も同様です。

どの方法も一長一短。マークアップの条件等々によって、このあたりは使い分けしていくのがいいと思います。