PR

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

2008年10月21日(火)
柴崎 正也

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のドット画像をあらかじめ用意しておき、それを表示させています。




 width指定を「100%」とすることで、高解像の端末でもそれなりの表示ができるように工夫しています。

画像の回り込みと解除

 画像を左側に表示させ、その右側にテキストを回り込ませて、貴重な画面領域を節約し、さらにわかりやすいデザインをしているサイトも最近ではよく見受けられます(図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のようになります。

PCおよび携帯サイト制作のほか、デコメ、SEO、LPOなどWEBサイト全般の業務に携わる。過去にイントラネットのデザイン改修、コーポレートサイトの企画および制作、タイアップバナー広告の作成、Movable TypeなどのCMSテンプレートカスタマイズ、PHPプログラミング等を経験。3年ほど前から携帯サイト制作にシフト。著書に「携帯サイト コーディング&デザイン」。そのほか、HTML/CSSリファレンスサイト、携帯サイト制作支援ブログなどを運営。HTMLタグボード:http://www.dspt.net/携帯ホームページを作ろう!:http://dspt.blog59.fc2.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています