3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすればいいと思いますか?
ぱっと思い浮かぶのは、恐らくcssのborderプロパティだと思いますが、実際どんな感じになるのかチェックしていきます。
xhtmlの場合、htmlの場合、と両方確認してみました。
QRコード
<画像:QRコード>
→サンプルページを見る
<div style="text-align:center;">
<div style="background:#eeeeee;border:2px solid #000000;text-align:center;width:80%;margin:0 auto;">
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
サンプルです。サンプルです。<br />
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
</div>
</div>
枠線は表示されません。
問題なく表示されます。
問題なく表示されます。
がしかし、width効かずに枠が画面いっぱいに広がります。
%指定もpx指定もどちらも効かず。
問題なく表示されます。
<画像:>
docomo F-01A(iモードブラウザ 1.0)
<画像:>
docomo F-07B(iモードブラウザ 2.0)
<画像:>
au W63K
<画像:>
softbank 930P(VGA)
3キャリア1ソースの場合、docomoのことを考慮するとborderプロパティを使うのはNG。
ではどうすればよいか。
ここで登場するのがtableタグです。
QRコード
<画像:QRコード>
→サンプルページを見る
<div style="text-align:center;">
<table style="width:80%;margin:0 auto;background:#000000;">
<tr>
<td style="background:#eeeeee;">
<div style="text-align:center;font-size:x-small;">
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
サンプルです。サンプルです。<br />
<img src="img/sp.gif" alt="" width="1" height="2" /><br />
</div>
</td>
</tr>
</table>
</div>
tableタグの背景色に指定している色が枠線となります。
こうすると、3キャリア1ソースでも大体の端末で枠線が実現できます。auで、divタグにborderプロパティを使用していたときに発生していたwidthが効かない現象も解消されます。
ただし、docomoの古い端末ではtableタグが無視されるため、対応機種にtable未対応端末が含まれている場合は要検討です。
QRコード
<画像:QRコード>
→サンプルページを見る
tableタグを利用していますが、問題なく表示されます。