携帯サイト制作の実践ノウハウ：破線や色付きの区切り線をhr要素で表示する

以前外部CSSでのエントリーでも触れましたが、区切り線（hr要素）はキャリアごとにCSSプロパティの効き方が異なるので、破線や色で装飾したhr要素を３キャリアで使うのは大変です。hr要素の代わりにいっそ画像を使うというのも一つのよい判断です。

しかし画像にしたらしたで、src属性を書くことでHTMLソースが長くなります。区切り線はサイトの中で頻繁に使うものなので、<hr />そのままの記述で簡単に画像が表示できたらなぁと思いませんか？

できます。ここ数日のエントリーでも紹介している、変換シートを活用することで可能です。


区切り線画像を用意し、次のイメージタグの記述を、変換シートに記述します。

<img src="image/hr_dashed.gif" />

●区切り線変換ルール（イメージ）

変換元キーワード		<hr />
変換後	ドコモ	<img src="image/hr_dashed.gif" >
	au	<img src="image/hr_dashed.gif" >
	ソフトバンク	<img src="image/hr_dashed.gif" >
	iPhone	;（変換しない）
	PCブラウザ	;（変換しない）

区切り線画像はVGA端末に合わせ横幅480ピクセルで作成すれば、ラウンドアバウトのオートレイアウト機能がどの機種から見ても常に同じ見た目をキープし横幅ピッタリに変換します。一方PCブラウザはCSSで様々な装飾が可能ですから、外部CSSにhr要素セレクタを記述し、hr要素をそのまま使います。

（外部CSS）

hr {
 border-style:dashed;
 border-color:#6600CC;
}

このように変換シートと外部CSSを組み合わせれば、携帯３キャリアには破線の絵柄の画像が表示され、PCブラウザやiPhoneにはCSSで破線で装飾したhr要素が表示されています。

（携帯３キャリアでの表示）

(iPhoneでの表示）

こうした自由で気軽な発想でもラウンドアバウトなら変換ルールにすることができて、ますます便利にサイト制作が行えるようになります。