RenzSpace Free Style Blog

モバイルサイトを作成するにあたり、見やすくする方法の一つとして<hr />を入れる事がある。しかし、<hr />に色や太さを正確に指示するのは難しいと思う。そこで使用されるのがCSSでのboder指示。しかし、これにも面倒な事がある。

これもまた、キャリア間での問題。

auやソフトバンクは問題なくdivにborder指示を出す事が可能なのだが、docomoキャリアの場合はダメ。

その場合、どうしたら良いのか。

これも結構単純に解決出来た。

幅1px×高1pxのいわゆるspacer.gifを用いて、幅１００％、高さ１pxのdivで囲ってあげる。
imgにはmargin:0; padding:0;の指示も入れておき、spacerを囲ったdivの背景色を決める。そうする事で、自分の好きな色で線を入れる事が可能となるわけです。

ただし、このやり方で問題が発生。

softbankキャリアでは大変不細工な表示になってしまう。

ですので、この方法はdocomoのみに使用し、ユーザーエージェント振り分けの方法でsoftbankにはborder指示を与えたものを準備しておく必要が出てきます。
そして、上記から想像出来るのが、４編を囲うようなデザインはモバイルでは全キャリアで
作る事は難しいという事も分かります。
まあ、どうしても前キャリアで４編をボーダーで囲ったデザインを用いたいというのであれば方法はいくらでもありますので、探ってみても良いかもしれませんね。