携帯サイトを制作する機会があったので、いろいろ調べた参考サイトをまとめようと思います。
参考ページ
- 3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン – livedoor ディレクターブログ
- 携帯サイトはfont size=-2ということについて長々と。 – webの人
- 携帯サイト(html)の制作に入る前に確認しておきたいチェック項目 │ これからゆっくり考L +α
- 携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
- ケータイプログラマのためのコミュニティサイト
- 携帯サイト構築メモ: あるSEのつぶやき
- marginはイメージにだけ | ホームページ制作知識備忘録|Hiroki’s Web Note
- モバイルサイトXHTMLコーディングのチェックポイント など10記事(海外&国内SEO情報) | Web担当者Forum
携帯シュミレーター
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 = ほとんど対応
携帯は、仕様がバラバラでなかなか対応するのが難しいですね。HTML仕様の統一と、あとは制作はPCで行うと思うのでもっとシュミレーターがたくさん出て精度がアップすると
携帯サイトも手軽に制作できるようになると思います。
コメント