3Gモバイル端末のWEBデザイン
(FOMA, WIN, 3GC)
※EZwebの一部端末では無視される可能性あり (DOCOMO d903iあたりで確認)
表示高さは360px程度かな？
画像形式はgif, jpg
スタイルシートはインライン(spanなど)のみ使える
外部スタイルシート不可
機種対応絵文字は機種によって見栄えが違うので注意 gif画像でよくね？
ドコモに対応させるためには適切なxhtml宣言と.htaccessの設置が必要
フォントの変更
モバイルの表示は等幅フォント。余白もそのまま表示される。
DoCoMoでは最小のフォントで1行に全角14文字ほど表示できる。
1234567890123456789012345678901234567890
フォントサイズの変更(小)
<span style="font-size:xx-small;"></span>
小さい文字
フォントサイズの変更(大)
<span style="font-size:xx-large;"></span>
大きい文字
フォントカラーの変更
<span style="color:#ff0000;"></span>
赤い文字
背景色の変更 <span style="background-color:#ccccff;"></span>
青い背景
表示位置の変更(左)
<div style="text-align:left;"></div>
表示位置の変更(中央)
<div style="text-align:center;"></div>
表示位置の変更(右)
<div style="text-align:right;"></div>
fontタグを使った旧書式
旧ドコモで対応させる書き方
旧html記法を使う
※ただし、xhtml宣言時は無効になってしまう
サイズ小 サイズ大 赤文字| 青背景 table使うとかアホか！？ |
中央
右
画像の回り込み
あいうえおかきくけこさしすせそたちつてと
0123456789 0123456789 0123456789 0123456789
あいうえおかきくけこさしすせそたちつてと
フォーム
入力時のUIに多少違いがある
テーブル レイアウト
|
|
|
|
|
|
|
|
|
おはようじょ
ろりこんにちわ
しょたこんばんわ
絵文字
Unicodeで「  」のような記法で記述する。 (16進法)
機種によって絵文字の絵柄やffffの数値は異なる。よって、サーバ側で機種判定し、別々の出力をさせる。
google code参照以下の画像はdocomo絵文字のサンプル
太陽 [% emoji.sun %] [% emoji.rain %] [% emoji.storm %] [% emoji.num1 %] [% emoji.num2 %] [% emoji.num3 %] [% emoji.home %] [% emoji.heart %] [% emoji.spade %] [% emoji.club %] [% emoji.diamonds %]罫線
罫線画像
表示幅は240pxが基本だが、一部端末(docomo)ではスクロールバーによって幅が縮まる場合があるため、230px程度にすると良い
↓の画像は幅240px。(横幅230pxの端末で見ると線がつぶれて表示される)
横幅 230px (つぶれ防止)
縦幅6px (読み込み中に×マークを表示させない)
|
pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp |
|
pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp |
|
pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp |
タイトル |
2009 02/14 18:00 |
pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp pppp Mr.xxxx |
コメントする |
