画像をピッタリ横並び表示させるテクニック

メニューやおすすめ商品といったバナー画像を携帯の画面に横並び表示させるのは結構難しい。それは機種ごとにブラウザの描画領域の大きさが異なることと、画像の折り返しが発生することによるものだ。携帯ならではのテクニックを披露する。

<img width="50%"> を使うと・・・

ブラウザの画面ピッタリに画像を2枚だけ横並び表示させようとするなら、真っ先に思いつくのはimgタグに属性 width="50%" を追加するという方法。携帯は機種によってブラウザ幅が異なるから、width="50%" を使えばお手軽かつどの機種でもピッタリ表示できそうだ。

早速、横480ピクセルのGIF画像を使用して検証してみる。画像の大きさが分かりやすいように赤い枠をつけておいた。

使用したのは次のようなHTMLソース(一部のみ抜粋)。念のために hspace="0" と border="0" を指定して画像の周囲に隙間ができるのを避けるようにしている(ちなみに表記上改行を入れているが、機種によっては2枚の画像の間に隙間が出来るために実際には改行を入れていない)。

<img src="banner.gif" width="50%" hspace="0" border="0" />
<img src="banner.gif" width="50%" hspace="0" border="0" />
<br />

これを実機で見ると次のようになった。

【docomo】 N-06A、N905i、N904iIMGP1275-s

【au】 G9、W61K、MEDIA SKIN

IMGP1285-s

【SoftBank】 932SH、920P、720SC

IMGP1293-s IMGP1304-s

約半数の機種は、なぜか2つ目の画像が折り返して表示されてしまっている。

<td width="50%"> を使うと・・・

本来の使い道ではないことを承知で、tableタグをレイアウトのために使ってみる。ここでもborder属性やcellspacing属性などを設定して、テーブルの枠の影響ができないように指定してみた。

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td width="50%">
   <img src="banner.gif" hspace="0" border="0" />
  </td>
  <td width="50%">
   <img src="banner.gif" hspace="0" border="0" />
  </td>
 </tr>
</table>

さすがに折り返しは発生しないだろう、と思い実機で見てみた。

【docomo】 N-06A、N905i、N904i

IMGP1276-s

【au】 G9、W61K、MEDIA SKIN

IMGP1287-s

【SoftBank】 932SH、920P、720SC

IMGP1295-s IMGP1305-s

うまくいった!と一瞬思ったけど、よくよく見るとdocomo N905iやN904iで画像の周りに数ピクセルの隙間が・・・。N905iやN904iのようなiモードブラウザ1.0端末の場合、cellspacing属性が1固定で変更できない、という制限があるからその影響によるものだろう。

でも少しくらいのことは気にしないなら、なかなかいい方法だ。

<div width="50%"> を使うと・・・

今度はdivタグで横並びレイアウトを試してみる。

<div style="padding:0; margin:0; float:left; width:50%">
 <img src="banner.gif" style="width:100%; border:0; padding:0; margin:0">
</div>
<div style="padding:0; margin:0; float:right; width:50%">
 <img src="banner.gif" style="width:100%; border:0; padding:0; margin:0">
</div>
<br clear="all" />

実機での結果は以下の通り。

【docomo】 N-06A、N905i、N904iIMGP1280-s

【au】 G9、W61K、MEDIA SKINIMGP1289-s

【SoftBank】 932SH、920P、720SC

IMGP1296-s IMGP1306-s

この方法は全然ダメ!divタグの width:50% が効かないのか、横一杯に画像が広がったりしている。折り返しが発生している機種もあるし、この方法は失敗。

最後の砦、 <img width="ピクセル数"> を使う

最後に試したのはimgタグのwidth属性で横ピクセル数を指定するというもの。

この方法ではブラウザ幅を半分にした値を機種毎に設定してテストしてみた。具体的には次のようなimgタグになる。機種ごとにブラウザ幅が異なるから大変!

機種 タグ
docomo N-06A <img src="banner.gif" width="240">
docomo N905i <img src="banner.gif" width="240">
docomo N904i <img src="banner.gif" width="120">
au G9 <img src="banner.gif" width="117">
au W61K <img src="banner.gif" width="116">
au MEDIA SKIN <img src="banner.gif" width="116">
SoftBank 932SH <img src="banner.gif" width="240">
SoftBank 920P <img src="banner.gif" width="235">
SoftBank 709SC <img src="banner.gif" width="115">

実機の表示結果は以下の通り。

【docomo】 N-06A、N905i、N904i

IMGP1281-s

【au】 G9、W61K、MEDIA SKIN

IMGP1291-s

【SoftBank】 932SH、920P、720SC

IMGP1299-s IMGP1307-s

苦労した甲斐もあって、この方法は9機種で成功!ただ、ブラウザ幅が奇数の機種の場合、右端に1ピクセル分だけ隙間ができてしまう。

まとめ

4つの実験結果をまとめてみた。

方法 タグ記述 結果
1 <img width="50%"> ・右側の画像が折り返ってしまう機種がある。

・width="45%"とかにしておけば折り返らないけどピッタリ表示にはならない。
2 <td width="50%"> ・折り返ることなく、キレイに横並び表示される。

・一部機種では画像の周りに隙間ができる。

・tableタグに対応していない機種では使用できない。

3 <div width="50%"> ・ほとんど使い物にならない。
4 <img width="ピクセル数"> ・折り返ることなく、キレイに横並び表示される。

・一部機種では右端に1ピクセルの隙間ができる。

・1機種ごとにピクセル数を設定するのは労力大。

結局のところ完璧な方法はなかったから、どこかで妥協点を見つけるっきゃない。

最近の機種で画像がピッタリ表示されればいいや・・・ということなら方法2。労力はかかってもいいから、テーブルに対応していない機種も含めて広範囲に対応したい・・・ということなら方法4。

方法1や方法3は携帯ではうまくいかないので注意が必要だ。

(参考)