携帯サイトの作り方

モバイル

携帯サイトを制作する機会があったので、いろいろ調べた参考サイトをまとめようと思います。

参考ページ

携帯シュミレーター

PCで簡単にチェックできるシュミレーター。ですが、最終的には実機で確認しましょう。

まとめ

フォントサイズ

docomoの文字が3段階までしかないので、基本的に文字は3段階に合わせる。

ただ3段階目は大きいのでCSSで指定する場合xx-smallとmediumあたりの2段階で調整すると良い。

fontタグを使用する場合は最初にfont size="-2"を指定すると。それなりなサイズになる。

CSS

docomoは外部CSSに対応していなかったが、iモードブラウザ2.0端末(2009年夏機種)から外部CSSに対応している。

headタグ内でリンクの疑似クラスを使うことは可能なので、リンクの設定はそこでまとめておこなうが、リンクの下線の色が適応されない機種があるので>a>タグの中に>span>をいれて色を指定する。
<a><span></span></a>

iモードブラウザ1.0のみ、リンクの下線の色はどうしても変更できない。

余白はspacer.gifで対応する。

携帯キャリアごとのdivタグ"float"プロパティ指定の可否(background-colorの指定が可否)

  • docomo = ほとんど対応
  • au = floatプロパティ非対応 → align or tableで対応する
  • SoftBank = ほとんど対応

携帯キャリアごとのimgタグ指定"float"プロパティ指定可否

  • docomo = インラインstyle指定対応
  • au = imgタグにHTML形式でalign指定なら対応
  • SoftBank = インラインstyle指定対応(一部align指定)

携帯キャリアごとのtableタグ指定

  • docomo = HTML6.0以上対応のimode対応機種で使用可 docomo 902以前のものは未対応(2005年10月19日以前)
  • au = ほとんど対応
  • SoftBank = ほとんど対応

引用元:携帯サイトCSS対応一覧 - 超モバイル-携帯サイト制作講座

携帯は、仕様がバラバラでなかなか対応するのが難しいですね。HTML仕様の統一と、あとは制作はPCで行うと思うのでもっとシュミレーターがたくさん出て精度がアップすると 携帯サイトも手軽に制作できるようになると思います。