3キャリア対応のモバイル向けサイトを作るにあたって

自分のような初心者には丁度よくまとまっている blog エントリがあったので、これを元に自分用にさらにまとめ、整理してメモ。

ちょっと詳しいモバイルサイトの作り方
お世話になりました。ありがとうございました。

3キャリア対応
1つの html で済ませる。

xhtml で作成する
ブロックレベル要素の背景色をつけるにはtableタグを使用するという手もあるが、対応端末の敷居をあげることにもなるので table タグは使用しない。

モバイル向けの xhtml の書き方には PC とは違うテクニックが必要
http://dspt.blog59.fc2.com/blog-entry-36.html

キャリアごとの仕様の差異を外部 CSS で埋める
（外部 CSS を読み込める au / softbank と、そうでない docomo。ここを利用する）

キャリアごとの仕様の差は外部CSSで
http://dspt.blog59.fc2.com/blog-entry-39.html#top

画像サイズの幅は240px

• au や docomo ブラウザでは自動的に拡大縮小する機能が備わっているので、240px で作っておけばピッタリ収まるようになっている。
• softbank はそのまま表示するので、高解像度の端末の場合、小さく表示されてしまう場合がある。

3キャリア対応サイトを作る際の注意点 （画像フォーマット編）

流れるテキスト
xhtml を使うという前提なので div を使って。
狭くて小さな画面だからこそ携帯に適したマーキー（marquee）タグ

流れるテキスト

背景色をつけた上で文字色を白抜きとか（背景に対しての文字色反転）

新着ニュース

色付き罫線の表現（hr）

キャリアごとの表示における特徴
◎ docomo
XHTML ではすべての属性に非対応

◎ softbank
・けい線の上下にマージンがとられる
・hrの余白調整は margin ／ padding プロパティで対応可能
・陰をなくす noshade に対応

◎ au
・ライン色は color プロパティで対応
・au 以外のキャリアのライン色は background プロパティで対応
・height プロパティは非対応（ size 属性で縦方向の長さを指定）
・border プロパティは非対応（ au 以外はけい線の境界線を指定可）
・text-align プロパティはauのみ対応（ au 以外は align 属性を使用）

要素の右寄せ
PC における扱いとこのへんは一緒みたい。

もっと見る

画像の回り込み

ゲーム
ﾊﾞｽｹで給料UP!?

ポイントとしては、docomo 用にはインライン CSS で img 要素に float プロパティで回り込みを指定。au は float プロパティに対応していないので（確認してないけどそうらしい）img 要素に align 属性で指定する。そして、回り込みを解除したいところで <br clear=”all” /> する。

docomo は <br clear=”all” /> じゃ、回り込み解除出来ないらしい。なので、解除したい位置の次で<hr />を入れる。（ docomo / au どちらでも有効らしい）もひとつの手としては、解除したい位置の次にくる要素を div で囲って、以下のようにする。

次にくる内容

第一行にある clear=”all” は、古い機種を考慮すると入れておいたほうがいいらしい。

table タグを使ってって手もあるけど、安易なので避けるべし。（前述のように対応端末の敷居が、という問題がある）

半角スペースを活用する
携帯ではフォントの幅が固定で、どれも同一らしい。（プロポーショナルフォントのように文字によって幅が異なることがないらしい）
なので、半角スペースを使っての調整が有効になる。