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

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

関連記事：

• Androidスマートフォンの壁紙サイズの法則が見えてきたぞ
• 入力フォームの操作性、機種による違いにご注意！
• 携帯でcaféのéを表示できるのか！？
• スマートフォンのラジオボタンを使いやすいサイズにするには？
• スマホ向けページャデザイン 3選
• CSS3 擬似クラス
• auブラウザ、いまだにUTF-8が使えず！
• 携帯画面の表示サイズについての考察
• 絵文字をShift_JISからUnicodeに変換する　SoftBank編
• [VGAとQVGA] 2倍の解像度の差が引き起こすデザイン崩れ part.1

<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、N904i

【au】 G9、W61K、MEDIA SKIN

【SoftBank】 932SH、920P、720SC

約半数の機種は、なぜか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

【au】 G9、W61K、MEDIA SKIN

【SoftBank】 932SH、920P、720SC

うまくいった！と一瞬思ったけど、よくよく見ると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、N904i

【au】 G9、W61K、MEDIA SKIN

【SoftBank】 932SH、920P、720SC

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

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

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

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

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

【docomo】 N-06A、N905i、N904i

【au】 G9、W61K、MEDIA SKIN

【SoftBank】 932SH、920P、720SC

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

まとめ

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

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

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

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

（参考）

• iモード対応HTMLとiモード対応XHTML比較表（www.docomo.co.jp）

関連記事：

• Androidスマートフォンの壁紙サイズの法則が見えてきたぞ
• 入力フォームの操作性、機種による違いにご注意！
• 携帯でcaféのéを表示できるのか！？