【3キャリア共通コーディング】テーブルで、シンプルなソリッドを。

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

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


モバイルに於ける細かい制約等はここでは控えますが、「実線(solid)を表現する」ということは、3キャリア共通では「border-style属性に対応していない」ということが前提になります。さて、スタート。

borderを指定する

そこでここは大人しく、まずドコモの「iモード対応XHTML」の仕様からborderのみをチョイス。
3キャリア共通コーディング:テーブルで実線の失敗例
PCでもお馴染みの、極々普通のラインが表現できます。が、目指すソリッドにはほど遠いです。

borderに加えて、border-colorも指定する。

で、あれば色を付けてみようじゃないかと、border-colordも指定してみます。
3キャリア共通コーディング:テーブルで実線の失敗例
エンジ色を指定しているのに、やんわり着色されました。
モバイルサイトで、この形はよく見掛けます。

念のため…

border-colorだけでも試してみます。
3キャリア共通コーディング:テーブルで実線の失敗例
borderを指定していないので、当然の結果となります。

…と、border関連で表現するには難しそうです。

そこで浮上してくるのが「background-color」

「cellspacing」や「cellpadding」もドコモでは非対応なので、他に悪あがきができそうなものは「background-color」くらい。これをテーブルとセルそれぞれに指定してみると、なんということでしょう。
3キャリア共通コーディング:テーブルで実線の失敗例
惜しい!若干隆起(ridge)します…。
これも、モバイルサイトで多く見掛けます。ゴール一歩手前です。

それなら…

邪魔な隆起を取ってみましょうか。
3キャリア共通コーディング:テーブルで実線の成功例
border-colorをテーブルとセルでそれぞれ異なる色で指定し、borderは0px。
これで僕らが目指したソリッドに辿り着くことができます。ただし、太線は無理です…。

■3キャリアでテーブルの実線(solid)を表現するソース

<table width="char" height="char" border="0" style="background-color:char">
<tr>
<td style="background-color:char">hogehoge</td>
</tr>
</table>

■注意点

そんなことをしなくても「テーブルを入れ子で書けば…」
この場合、au端末ではテーブルの入れ子は全てが表示されない結果となりますのでご注意を。


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