前回のhtml版に引き続き､今回はxhtmlの場合です｡ htmlと比べて出来ることが増えるので色々なﾃﾞｻﾞｲﾝの再現が可能ですが､やはり3ｷｬﾘｱ1ｿｰｽとなると気をつけるべきﾎﾟｲﾝﾄがいくつかあります｡

ｺｰﾀﾞｰ(もしくはﾃﾞｨﾚｸﾀｰ?)さんは､ﾃﾞｻﾞｲﾝをﾊﾟｯと見て｢このﾃﾞｻﾞｲﾝで組めます!｣｢組めません無理です...｣の判断が咄嗟にできるようになると素敵だと思います｡

ﾃﾞｻﾞｲﾅｰさんは､これからあげるﾁｪｯｸﾎﾟｲﾝﾄを頭の片隅にいれつつﾃﾞｻﾞｲﾝしていただけると､ｺｰﾀﾞｰからの戻しが少なくてすむようになるかと思います｡

前置きはこのぐらいにして､早速本題へ｡

以下が今回のｻﾝﾌﾟﾙﾃﾞｻﾞｲﾝです｡

<画像：初期提出ﾃﾞｻﾞｲﾝ>

｢これをxhtml､3ｷｬﾘ1ｿｰｽｺｰﾃﾞｨﾝｸﾞしてください｣
と言われた場合で考えていきます｡

前提条件は､
･3ｷｬﾘｱ1ｿｰｽ
･xhtml
･文字ｺｰﾄﾞ：Shift-JIS
･改行ｺｰﾄﾞ：CR LF
･QVGA対応(VGA対応は特にしない)

対応端末は､
･docomo 902以降(table未対応機種を除外)
･au WIN端末
･softbank 3G
です｡

ﾁｪｯｸﾎﾟｲﾝﾄ

ﾊﾟｯと見て指摘すべき個所は以下の項目｡

<画像：ﾃﾞｻﾞｲﾝのﾁｪｯｸﾎﾟｲﾝﾄ>

各ﾁｪｯｸﾎﾟｲﾝﾄの詳細は以下を｡

背景画像は1つのみ

htmlの場合は｢背景色を複数つかっていないか｣というのがﾎﾟｲﾝﾄでしたが､xhtmlの場合は背景色はいくつあってもOK(divの背景色としていくつでも指定可)です｡

ただ､背景画像に関してはbodyﾀｸﾞにしか指定できません｡ 詳細は｢[携帯]各ｷｬﾘｱ別､背景画像の対応状況｣のｴﾝﾄﾘｰを｡

なので､｢背景画像は1ﾍﾟｰｼﾞにつき1種類まで｣です｡

今回のｻﾝﾌﾟﾙﾃﾞｻﾞｲﾝの場合､bodyで背景画像を指定しているので､ﾀｲﾄﾙ画像部分に背景画像は使えません｡なので､ﾀｲﾄﾙ画像はﾃｷｽﾄも含めて1枚画像にします｡

違う背景色が連続するところはdivの使い方に注意

auでは要素と要素の間に隙間があきます｡ なので､違う背景色を指定しているdivとdivの間に隙間があいてしまうので､bodyに指定している背景画像がその隙間に表示されてしまいます｡

分かりやすいところで､｢ｻｲﾄ内検索｣の部分で説明すると､

<div style="background:#84775d;">ｻｲﾄ内検索</div><br />
<div style="background:#f6f0e3;">ﾌｫｰﾑのﾊﾟｰﾂ</div>

とやってしまうと､auで見た時に

<画像：auで見た時のｻﾝﾌﾟﾙ画像>

こんな感じで隙間があくのです｡

なので､divを入れ子にする必要がでてきます｡

<div style="background:#84775d;">ｻｲﾄ内検索<br />
<div style="background:#f6f0e3;">ﾌｫｰﾑのﾊﾟｰﾂ</div>
</div>

｢ｻｲﾄ内検索｣以外にも同様にdivの使い方に注意が必要な個所として､ﾀﾌﾞとﾀﾌﾞのすぐ下のﾗｲﾝとの間､｢お知らせ｣の各項目の部分はdivの使い方に注意しないとauで隙間があきますので要注意です｡

ﾌｫﾝﾄ関連

xhtmlの場合はcssでfont-size:**;と指定します｡ **へはx-small,mediumといった値を入れます｡ font-size:10pxという指定もできますが､携帯端末側での文字ｻｲｽﾞ変更が効かなかったり､各ｷｬﾘｱで表示が結構異なってしまうので使わない方がいいです｡

[ﾍﾟｰｼﾞ移動: 1 2 3]