【3キャリア共通コーディング】テーブルで、シンプルなソリッドを。
お久しぶりです。Shoe'sです。
モバイル向けのXHTMLで3キャリアで同じ表現をしようとした場合には、必然的に一番表現能力の劣るドコモに合わせる必要があります。モバイルユーザビリティ・デザインにも載せているコーディング例の他にも、ハマってしまうポイントや汎用的に表現したいもの。という観点から今回は『TABLEで実線（solid）を表現する』方法を紹介します。
モバイルに於ける細かい制約等はここでは控えますが、「実線（solid）を表現する」ということは、3キャリア共通では「border-style属性に対応していない」ということが前提になります。さて、スタート。
PCでもお馴染みの、極々普通のラインが表現できます。が、目指すソリッドにはほど遠いです。
エンジ色を指定しているのに、やんわり着色されました。
モバイルサイトで、この形はよく見掛けます。
borderを指定していないので、当然の結果となります。
…と、border関連で表現するには難しそうです。
惜しい！若干隆起（ridge）します…。
これも、モバイルサイトで多く見掛けます。ゴール一歩手前です。
border-colorをテーブルとセルでそれぞれ異なる色で指定し、borderは0px。
これで僕らが目指したソリッドに辿り着くことができます。ただし、太線は無理です…。
モバイル向けのXHTMLで3キャリアで同じ表現をしようとした場合には、必然的に一番表現能力の劣るドコモに合わせる必要があります。モバイルユーザビリティ・デザインにも載せているコーディング例の他にも、ハマってしまうポイントや汎用的に表現したいもの。という観点から今回は『TABLEで実線（solid）を表現する』方法を紹介します。
モバイルに於ける細かい制約等はここでは控えますが、「実線（solid）を表現する」ということは、3キャリア共通では「border-style属性に対応していない」ということが前提になります。さて、スタート。
borderを指定する
そこでここは大人しく、まずドコモの「iモード対応XHTML」の仕様からborderのみをチョイス。PCでもお馴染みの、極々普通のラインが表現できます。が、目指すソリッドにはほど遠いです。
borderに加えて、border-colorも指定する。
で、あれば色を付けてみようじゃないかと、border-colordも指定してみます。エンジ色を指定しているのに、やんわり着色されました。
モバイルサイトで、この形はよく見掛けます。
念のため…
border-colorだけでも試してみます。borderを指定していないので、当然の結果となります。
…と、border関連で表現するには難しそうです。
そこで浮上してくるのが「background-color」
「cellspacing」や「cellpadding」もドコモでは非対応なので、他に悪あがきができそうなものは「background-color」くらい。これをテーブルとセルそれぞれに指定してみると、なんということでしょう。惜しい！若干隆起（ridge）します…。
これも、モバイルサイトで多く見掛けます。ゴール一歩手前です。
それなら…
邪魔な隆起を取ってみましょうか。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端末ではテーブルの入れ子は全てが表示されない結果となりますのでご注意を。
この場合、au端末ではテーブルの入れ子は全てが表示されない結果となりますのでご注意を。
日時: 2009年11月19日 17:50
