3キャリア対応の携帯サイトを作るには

spacer.gif代用と背景見出し、点線区切り

　けい線について紹介しましたが、実際には最近のサイトはhrタグを使わずに、spacer.gifと背景色指定をうまく使って、けい線を表示させる代用法が一般的なようです。

　例えば、サンプルサイトの「今週のオススメ」という部分をHTML／CSSで、図2-1、図2-2のように表現しています。背景がついた見出しは、backgroundプロパティをdivタグに適用することで可能です。backgroundプロパティが使用できるのはドコモの場合で「body」「div」「hr」とtable関連のタグのみです。

　また、見出しの上下に1pxの線が入っていますが、これがspacer.gifを使ったけい線です。透明のspacer.gifをCSSで背景色を指定したdiv要素に含ませることで実現しています。spacer.gifの高さを変えることで、けい線の太さを変えることもできます。

　さらに、「検索メニュー」の上に挿入している点線のけい線は、CSSではなく横240pxのドット画像をあらかじめ用意しておき、それを表示させています。

画像の回り込みと解除

　画像を左側に表示させ、その右側にテキストを回り込ませて、貴重な画面領域を節約し、さらにわかりやすいデザインをしているサイトも最近ではよく見受けられます（図2-1）。画像の周りにテキストを回り込ませる方法についても、キャリアによって指定方法が異なるので、図2-3のように記述することで解決できます。

　例えば、画像の右側にテキストを回り込ませる場合、指定方法はalign属性を使う場合と、CSSでfloatプロパティを使用する方法がありますが、前者はドコモ（XHTML）が非対応、後者はauが非対応です。したがって、これらを併記しなければ回り込みを実現できません。

　また、marginプロパティはドコモでもimgタグに対応するので、文字との余白調整に使用できます。画像の周りを囲むボーダーについては、border属性、borderプロパティともにドコモでは対応していません。

　回り込みの解除方法についても注意してください。
で解除できるのは、auとソフトバンクのみです。ほかには、解除したい位置の次にくるブロックレベル要素（ただし、ドコモでは「blockquote」「dl」「div」「form」「hr」「h1-h6」「ol」「ul」「p」「pre」、マーキースタイルが適用済みのspanタグのみ）にclearプロパティを適用することによって、回り込みを解除する方法があります。この方法は全キャリア対応ですので、旧機種を考慮した回り込みの解除方法は図2-3のようになります。