携帯サイト コーディングのポイント


いつも携帯サイトのコーディングを行う際、PCとの勝手の違いに苦労する。
AU・DOCOMO・SOFATBANKとコーディング方法が微妙に困るのでそれぞれ表記してあげる必要がある。
基本的な部分のコーディングを自分なりにまとめてみた。

①リンクの色

まずは、全体のリンク色の設定。ヘッダー内に以下のように記述する。

②背景色

背景色は基本bodyタグに記述するが、キャリア・機種によっては反映されない場合があるので、
bodyダクとdivタグと両方同じ記述をしてあげると安心。

③画像の回り込み

画像の回り込みは、機種依存をなくすために、以下のようにstyleのfloatだけでなくalignでも指定してあげる必要がある。

④文字サイズ

携帯サイトの文字サイズは数値ではDocomoが効かなかったり、、
また、キャリア毎に数字の基準が違うので使いづらいです。styleに下記のキーワードで指定する必要あり。
ただ、x-smallとxx-smallが同じ大きさだったりするので、small < medium < largeの3サイズ位で留めておいてもよいかも。 xx-small < x-small < small < medium < large < x-large < xx-large

⑤テーブルタグ・リストタグ

対応している機種もありますが、基本使用しないほうがよい。
brタグと空白とfloatをうまく使って頑張る。

⑥hrタグ

hrタグは使用できるが、これまた各キャリア・端末によって勝手が違うのでごちゃごちゃ記述する。
下記は高さが1pxの時。

⑦センタリング方法

これは普通にstyleのtext-alignを使用。

思いつき次第追記していく。。かも。