docomoでmargin、paddingを設定する方法
携帯サイトの多くを見ていて気にいらないのが、モニター枠いっぱいのテキスト。これがホントに見てて疲れてしまう。PC向けコンテンツのレイアウトであれば、マージン、パディングを設定することで余白をとりゆったりとした表示にすることができるのだが、ドコモの携帯の場合はCSSの多くが利用できないためPC向けと同じにはいかない。
で、これをどう解決するかであるが、テーブルタグを利用する。
docomoの携帯でボックス要素に対してmargin、paddingを設定することは現時点では不可能、おまけにborderも使えないので、テーブルタグを利用する他ない。厳密に言えばmargin、paddingではないが、擬似的なmargin、paddingが設定可能となり余白を設けた余裕を持ったコンテンツ表示が可能となる。
CSSの登場ですっかりウェブ制作では影を潜めた感のあるタグであり、今さらテーブルタグという感じもあるがいたしかたない。
携帯端末モニターサイズに対し余裕を持ったテキスト表示をするのであれば以下のようにする。96％がいい感じ。
<body>
<div align="center">
<table align="center" width="96%" >
<tr><td>
<div style="text-align:left;font-size:x-small;">
モニターサイズに対してコンテンツに疑似paddingを設定してあるので、余裕のある表示となる。
</div>
</td></tr>
</table>
</div>
</body>
テーブルを入れ子にしてセル内で更にpaddingを加えることもできるが、au携帯ではテーブルタグの入れ子は行えず、入れ子の部分がそっくり消えてしまうので注意。
とは書いてみたものの、このやり方は書いた当時の方法です。
ドコモのブラウザが正常進化しスタイルシートに対応すれば良いなぁと思います。
ツイート
NEXT : 続 PageSpinnerのUTF8対応はどうなった
