テーブルを使ってauの「隙間」を消す

auでたびたび問題となる、画像とブロック要素の上下にある消せないマージン、いわゆる「隙間」について、その回避方法を紹介します。divタグを入れ子にすることで消す方法もありますが、今回紹介するのは別解という位置づけになるでしょう。使うのは、携帯サイトでは何かと御法度のように言われているtableタグです。

au隙間バグ回避方法

使うのはtableタグ

tableタグは携帯で使えないのでは？と思った方もいると思います。そんなことはないんです。使えないと言っているのは携帯サイト制作のノウハウ本などだけで、実際はほとんどの端末がtableタグに対応しています。現在サービス中のau端末でtableタグ非対応機種はありません。

au隙間バグとはどんな現象か

以下のデザインを隙間問題を考慮しないで普通に作ろうとした場合、次の2パターンのソースが考えられます。
sample.gif

サンプルソース1

<img src="blog01_h01.gif" />
<div style="background-color:#5CB024;color:#FFFFFF;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<br />
    <br />
</div>
<img src="blog01_h02.gif" />
<div style="background-color:#129CDE;color:#FFFFFF;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<br />
    <br />
</div>

サンプルソース2

<div style="background-color:#5CB024;color:#FFFFFF;">
    <img src="blog01_h01.gif" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<br />
    <br />
</div>
<div style="background-color:#129CDE;color:#FFFFFF;">
    <img src="blog01_h02.gif" />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<br />
    <br />
</div>

これをau・docomo・SoftBankの端末で見てみます。

サンプル1
pattern1

サンプル2
pattern2

au端末では、docomoとSoftBankにはない「線」が見えていると思います。サンプルソース1ではimgタグとdivタグの前後に、サンプルソース2では2つのdivタグの前後に線が出ています。この線がau特有の隙間バグです。

テーブルのセルが隙間をなくしてくれる

先に示したサンプルソースを次のように書き換えることでauでも他の2キャリアと同じに見えるようになります。

<table border="0" cellspacing="0" cellpadding="0">
<tr><td>
    <img src="blog01_h01.gif" />
</td></tr>
<tr><td style="background-color:#5CB024;color:#FFFFFF;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<br />
    <br />
</td></tr>
<tr><td>
    <img src="blog01_h02.gif" />
</td></tr>
<tr><td style="background-color:#129CDE;color:#FFFFFF;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<br />
    <br />
</td></tr>
</table>

table_au

ポイントは2つです。

  • tableタグの属性を使って罫線やセル間隔を非表示する

    border="0" cellspacing="0" cellpadding="0"
  • 隙間ができるimgやブロック要素の内容をそれぞれ1つのセルに入れる

    <tr><td>
    <img src="blog01_h01.gif" />
    </td></tr>
    <tr><td style="background-color:#5CB024;color:#FFFFFF;">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<br />
    <br />
    </td></tr>

divタグで指定していた色設定はtdタグに同じように書けますので、ブロック要素のほうは内容だけをセルに入れればOKです。

テーブルの入れ子とdocomoでは逆効果になるのがネック

divタグの入れ子よりも構造的にはスッキリしてソースも見やすいtableタグでの別解ですが、以下の2点に気をつける必要があります。

  1. docomo端末では逆に隙間ができてしまうので、テーブルを使うソースはau専用
  2. テーブルの入れ子に対応していない端末があるので、すでにテーブルを使っているところには適用できない

テーブルが実質ほとんど使われていない現在のサイトでは、まず、入れ子になる確率は低いので、2番目はあまり問題にはならないかもしれません。問題は1番目です。docomoではcellspacing・cellpadding属性は固定値になっており、ユーザ指定が効きません。border属性を使って罫線は消せますが、セル間の空きは潰せずに結局罫線があるように見えてしまいます。
table_docomo

divの入れ子より見た目もソースもキレイ

divの入れ子ではどうしてもソースが汚れますし、結局、divタグを閉じるところでまとめて「隙間」が発生します。tableタグを使うと隙間は完全にどこにも発生しなくなります。そしてソースもシンプルです。auの隙間で困っていた方はぜひtableタグを使うこの方法を参考にしてみてください。ただ、残念なことに、前述した1の問題のためにソースを1つにまとめることができないのがイタイところです。

tableタグのイタイ問題点も、ラウンドアバウトを使えば解決できます。今回紹介したau隙間バグ回避方法をもっと簡単に1ソースで使えるように、ラウンドアバウトでは独自タグを用意しています。この独自タグとラウンドアバウトの画像変換機能を使うことで、応用編としてタブデザインやクリッカブルマップみたいなものも作れます。ラウンドアバウトを無料で体感できるhow about roundaboutで試すことができるので、いろいろ作ってみると面白いと思います。

Page Top