【3キャリア共通コーディング】au(EZweb)端末で、divの隙間を消す裏技。

お久しぶりです。Shoe’sです。

モバイル向けのXHTMLで3キャリアで同じ表現をしようとした場合には、必然的に一番表現能力の劣るドコモに合わせる必要があります。モバイルユーザビリティ・デザインにも載せているコーディング例の他にも、ハマってしまうポイントや汎用的に表現したいもの。という観点から今回は『au(EZweb)端末で、div要素間の無駄な隙間(スペース)を生まない』方法を紹介します。

モバイルに於ける細かい制約等はここでは控えますが、「div要素で隙間が生まれる」ということは、3キャリア共通では「margin属性やpadding属性に対応していない」ということが前提になります。というところで、まずは問題点から。

au(EZweb)端末に於ける、div要素の問題点

ごく普通にdiv要素を記述すると、au(EZweb)端末では要素の上下に余分なスペースが開いてしまいます。
3キャリア共通コーディング:au(EZweb)端末に於けるdiv要素の問題点
モバイルサイトでより凝ったレイアウトを実現しようとした場合に、悩んだことがある方は多いと思います。

div要素を入れ子で記述してみる

解決策として、真っ先に思い浮かぶ手法だと思いますが、以下の様にdiv要素-Bのスペースによって、外側(div要素-Bの下)に数ピクセルの予期しないdiv要素-Aの背景色が表示されてしまいます。
3キャリア共通コーディング:div要素を入れ子に記述しau(EZweb)端末で表示
この方法で落ち着いてるモバイルサイトはよく見掛けます。
ただし、このままではdiv要素を繋ぐ画像を表示させたい場合に、しっくりこないのです。
3キャリア共通コーディング:div要素を入れ子に記述しau(EZweb)端末で表示  3キャリア共通コーディング:div要素を入れ子に記述しau(EZweb)端末で表示
div要素-Aの下辺(左)に置いても、div要素-Bの上辺(右)に置いても、
表示させている側の背景色が数ピクセル、余計なスペースとなって立ちはだかります。

目から鱗のコーディングで解決する

このような問題は、細かな説明は省きますが(といっても説明のしようがありませんが)、
『全て入れ子にし、閉じタグを最後にまとめる』というコーディングにより解決できるのです!

是非、活用してみてください。

■3キャリアでdiv要素間の無駄な隙間(スペース)を生まないソース

<div style="background-color:char">div要素-A<br />
<div style="background-color:char">div要素-B<br />
<div style="background-color:char">div要素-C<br />
</div>
</div>
</div>


Fatal error: Allowed memory size of 268435456 bytes exhausted (tried to allocate 16271409 bytes) in /home/yumeco/www/prod/wp-includes/wp-db.php on line 1171