それで、ドコモに合わせたデザインが必要になります。もっとも、携帯で必要なデザインはそれほど多くはありませんから、これでもまずまずのデザインが実現できます。それで、PCtoMobile Ver.13 〜 Contents-Mall Ver.13、Multi Mail Form Ver.4で、下記の１)〜６)をデザインに取り入れました。
なお、３キャリアのXHTMLの仕様は異なり、DOCTYPEも異なっています。さらに、i-modeおよびSoftBankでは、XHTMLが使用できない機種がまだほんの少しあります。プログラムではこれらを判別して適切なXHTML又はHTMLを出力しています。もちろん、XHTMLに対応していない古い機種ではCSSは無視されますから、デザインはCSSなしのデザインとなります。しかし、携帯でインターネットをする人はそんなに古い機種を使ってはいないことでしょう。
１）文字サイズの指定多くの携帯サイトで文字サイズを小さくする傾向にあります。それで、各社の携帯で大きさを統一することが難しい状況ですが、機種ごとに文字サイズを指定できるようにしました。
システム設定【20】携帯の基本設定の、「文字を1段階小さくする」のところで機種ごとに指定できます。
また、ここで、1を指定すると、下記のように自動的に設定されます。
x-small/xx-small/x-small/12px （i-mode/AU/SoftBank/other(3キャリア以外)
の順）
２）文字の色の指定
文字の色、リンク関係の色をWEB上から指定できるようにしました。しかし、リンク関係の色指定は３キャリアで表示が異なっており同じ表示を実現するのは簡単ではありません。それで、背景色を黒にしたりする止むを得ない場合を除いては無指定にするほうが望ましいでしょう。
３）背景色付きの見出し
タイトルや見出しに背景を付けるだけでデザインや分かりやすさは飛躍的に向上します。この点で３キャリア共に同じ表示を実現できるように努力してみました。
４）spacer.gifを使った罫線
罫線は普通タグ<hr>を使いますが、３キャリアで表示を一致させることはむずかしく、上下のマージンを０にすることはできないようです。
それで、最近多く使われている下記の方法で罫線を表示しました。これにより柔軟な罫線表示が可能になります。
マージン０の高さ1xpの罫線：
<div
style='background:gray;'><img src="./p_image/spacer.gif" width='1'
height='1'></div>
５）spacer.gifを使ったスペース
限られた携帯画面では行間を適切に取ること重要になります。それで、この場合も下記のような方法でスペースを確保しました。これにより改行ではできない行間の自由な設定ができます。
高さ5pxの行間のスペースの場合：
<div><img src="./p_image/spacer.gif" width='1'
height='5'></div>
６）float:leftによる画像の回り込み
商品のサムネイル画像の回り込みは画面領域の節約と見やすいデザインのためにとても有効で、３キャリアともfloat:leftが使えるのでそれを利用しました。floatの解除は次のように行います。
<img src="" border='0' align='left' style='float:left;'
/>
・・・・・
