携帯サイト実践ノウハウ：auで発生する「画像の隙間問題」を解消する

ブロック要素に背景色を付けるデザインは、ページにメリハリを付けるのに効果的なのでよく使われますが、auではたびたび「隙間発生問題」という意図通りの表示がされない問題にも遭遇します。

詳しくはsympleブログのエントリーで解説されていますが、このエントリではラウンドアバウトが用意している拡張タグ

を使った実例を紹介します。この拡張タグを使うことで、キャリアによってdivとtableを書き分けるという煩雑なことをせず、シンプルなソース記述で隙間の発生を防ぐことができます。隙間が消せないというデザインの限界・制約を乗り越えられるので、画像同士やブロック要素を隙間なく並べたデザインが簡単にできるようになります。

隙間を解消するラウンドアバウトの拡張タグ「ra:field」「ra:area」は、端末グループによって次のように言語変換されます。

・

・

・

・

それでは、冒頭の隙間が発生してしまうHTMLソースを、拡張タグを使った書き方に変えてみましょう。手順は以下の３点で、大掛かりにHTMLを書き換えることなく使うことができると思います。

1. 背景色付きのブロック（div要素）に接する画像のimg要素をra:area要素で囲む
2. 背景色付きdiv要素をra:area要素に置き換える
3. 画像・背景div・画像･･･と続く一連の要素全体をra:field要素で囲む

（隙間が発生するソース)

↓
（拡張タグによって隙間を解消したソース）

拡張タグを使って表示した結果がこちらです。３キャリアで見ても同じように画像と背景が馴染んだデザインをすることができました。