[携帯]背景画像の各ｷｬﾘｱの仕様
2009-10-20 01:44:07
ﾓﾊﾞｲﾙで背景画像の左端(ないし右端)に画像をﾘﾋﾟｰﾄさせたい｡
という案件に遭遇しまして｡
どういう風に対応するのがﾍﾞｽﾄかを色々試してみました｡
条件は｢3ｷｬﾘｱ1ｿｰｽ｣｢xhtml｣です｡
横幅240pxの画像をﾘﾋﾟｰﾄさせる
docomoのiﾓｰﾄﾞﾌﾞﾗｳｻﾞ1.0(2008年秋冬ﾓﾃﾞﾙ以前)はbackground-repeatが効かないため､背景画像の横幅は240pxにしないといけません｡
※横幅いっぱいの背景画像でないと横(x軸方向)にもﾘﾋﾟｰﾄしてしまう為｡
<body style="background:#000000 url(bg_300.gif);">
<画像：QRｺｰﾄﾞ：ｻﾝﾌﾟﾙﾍﾟｰｼﾞ1>
→ｻﾝﾌﾟﾙﾍﾟｰｼﾞを見る
- 参考ｲﾒｰｼﾞ
- <画像：参考ｲﾒｰｼﾞ：ｻﾝﾌﾟﾙﾍﾟｰｼﾞ1>
ただ､このやり方だとVGA対応の画面で見た場合に画面中央あたりにもﾘﾋﾟｰﾄ画像が来てしまいます｡
- 参考ｲﾒｰｼﾞ
- <画像：参考ｲﾒｰｼﾞ：ｻﾝﾌﾟﾙﾍﾟｰｼﾞ1-2>
VGA対応の画面も考慮して横幅480pxの画像をﾘﾋﾟｰﾄさせる
<body style="background:#000000 url(bg_300_wide.gif);">
<画像：QRｺｰﾄﾞ：ｻﾝﾌﾟﾙﾍﾟｰｼﾞ2>
→ｻﾝﾌﾟﾙﾍﾟｰｼﾞを見る
- 参考ｲﾒｰｼﾞ
- <画像：参考ｲﾒｰｼﾞ：ｻﾝﾌﾟﾙﾍﾟｰｼﾞ2>
docomoのiﾓｰﾄﾞﾌﾞﾗｳｻﾞ1.0以外(au､softbank､docomoのiﾓｰﾄﾞﾌﾞﾗｳｻﾞ2.0)だとこんな感じの表示に｡
- 参考ｲﾒｰｼﾞ
- <画像：参考ｲﾒｰｼﾞ：ｻﾝﾌﾟﾙﾍﾟｰｼﾞ3>
docomoのiﾓｰﾄﾞﾌﾞﾗｳｻﾞ1.0で見てみるととても残念な感じに｡
横幅480pxの背景画像が240pxに圧縮され､同倍率で縦も縮小されてしまうようです｡
ということで､この方法もNGです｡
横幅240pxの画像＋[repeat-y]
背景の横幅が画面より大きくなると画面ｻｲｽﾞにあわせて縮小してしまうのはiﾓｰﾄﾞﾌﾞﾗｳｻﾞ1.0｡
→背景画像の横幅は240pxにすべし!
repeaet-yが効かないのはdocomoのiﾓｰﾄﾞﾌﾞﾗｳｻﾞ1.0｡
→VGA対応端末にはrepeat-yを指定しておけば横(x軸方向)にﾘﾋﾟｰﾄしない!
ということで､背景の左端に画像をﾘﾋﾟｰﾄさせたい場合は､｢背景画像の横幅を240pxに｣｢repeat-yを指定｣するとｷﾚｲに実現できそうです｡
<body style="background:#000000 url(bg_300.gif) repeat-y;">
<画像：QRｺｰﾄﾞ：ｻﾝﾌﾟﾙﾍﾟｰｼﾞ3>
→ｻﾝﾌﾟﾙﾍﾟｰｼﾞを見る
おまけ：画面右端に背景画像をﾘﾋﾟｰﾄさせたい場合
<body style="background:#000000 url(bg_300_r.gif) repeat-y right top;">
<画像：QRｺｰﾄﾞ：ｻﾝﾌﾟﾙﾍﾟｰｼﾞ4>
→ｻﾝﾌﾟﾙﾍﾟｰｼﾞを見る
背景画像の表示位置を｢right｣にしておけば実現可能です｡
