一応、注意点をまず述べておくと、XHTML対応しているのは、docomoのFOMA端末、auのWIN端末、softbankの3GC端末という、いわゆる上位端末になります。古い下位機種では利用できません。最近は下位端末を利用している人は、少なくなりましたし、仮に利用していてもまずネット閲覧にケータイを使う目的ではないので、このあたりは非対応でも問題ないかなと考えています。

次に全体の容量にも注意しておきます。基本的にはi-modeの上限(i-mode2.0は除く)である容量100KBを守ればいいのですが、流石にその容量まで使い切ると、表示が重くなるのは当然。因みに、この容量とは表示されるページのソース部分と画像の合計になります。仮にソース側が5KBである場合、画像は残りの95KB使えるということです。
個人的には合計して50KB以下に抑えておくのがちょうど良いかと思います。

コーディングの前に共通の画像を用意する

コーディングを共通させるのは勿論ですが、画像も1枚の画像を共通で利用するようにしなければなりません。
●サイズ　width 最大240px以下
最近の画面サイズで言えば、まぁ240pxで概ねOKなんですが、機種によってまちまち。例えばブラウザにスクロールバーが表示されてしまうことで画像の幅が圧迫されて画像が荒れることもあります。そういうのがイヤって人は230pxくらいで作成した方がいいかなと。
●拡張子　.jpg/.gif
容量は出来る限り落とすのが無難。そう言う意味ではGIF形式の方がいいかも。個人的にはJPG形式を多用してますが。PNG形式はi-mode1.0では非対応になってますが2.0では対応になりました。とは言え対応機種の数も少ないですし、現時点ではまだ上の2形式で用意したほうがいいです。

CSSの対応について

この辺も実はキャリアによって差があります。
●i-mode
インラインCSSのみ対応。外部CSSは非対応です。疑似クラスは使えます。
利用可能な疑似クラスはlink/visited/focusの3つ。
●EZweb/Yahoo!ケータイ
こっちは2キャリア共通。外部CSS対応していて、headに纏めて記述も出来ます。疑似クラスはlink/visitedに対応。

個人的にはあんまり外部CSS使ってません。まぁインラインCSSと疑似クラスだけ。そろそろスタイルの共通化をさせる意味で、外部CSSのテンプレートも作ろうかとは考えていますが。ちなみに対応していないスタイルは無視されます。

実際のコーディングはこんな感じ

まずはdivタグの使い方について。divではブロックの背景カラー、位置の指定、マーキーなんかに使います。

/* ブロックの背景カラー指定 */

<div style="background-color:#000000;">hoge</div>

/* 位置の指定(中央) */

<div style="text-align:center;">hoge</div>

/* 位置の指定(右) */

<div style="text-align:right;">hoge</div>

/* 位置の指定(左) */

<div style="text-align:left;">hoge</div>

/* マーキー */

<div style="display:-wap-marquee;">hoge</div>

基本的に位置指定で左は使わなくてもいいかなと。デフォルト左ですし。ただ、例えば中央位置指定をしたdivタグ内にさらにdivタグを追加して右、左の位置指定をする場合は必要です。また、マーキーはi-modeの場合、中に含める文字数に制限があって、全角32文字を超えると自動的にテキストがカットされるので注意。
ちなみにスタイルはひとつのタグに複数書き込めます。例えばブロック背景色黒、位置指定が中央の場合は以下のように記述します。

/* ブロックの背景カラー:黒 位置の指定:中央 */

<div style="background-color:#000000; text-align:center;">hoge</div>

次にspanタグの使い方。spanタグは主に文字への指定を行います。文字の大きさや文字の色など。装飾もまぁあるか。あんまり利用頻度は多くないですがインラインの背景カラーにも利用されます。

/* 文字のサイズ指定(大) */

<span style="font-size:xx-large;">hoge</span>

/* 文字のサイズ指定(小) */

<span style="font-size:xx-small;">hoge</span>

/* 文字色の指定 */

<span style="color:#ffffff;">hoge</span>

/* インライン背景カラーの指定 */

<span style="background-color:#000000;">hoge</span>

この他にも文字を点滅させるblinkなどもspanタグで使いますが、個人的にはあんまり使いません。テキストを強調して目線を行かせるには有効ですが。なお、文字サイズを大きくするというのもあまり利用頻度は高くないですかね。文字を大きく見せる場合は、大概タイトルやキャプションといったものなので、h1/h2/h3/h4といったところを使います。また、pタグもありますが、最近はあんまり利用されないですね。ムダに要素と要素の間が開くので。
因みに先ほどのdivタグと組み合わせると、以下のような記述になります。

/* ブロック背景色:黒 位置指定:中央 文字サイズ:小 文字色:白 */

<div style="background-color:#000000; text-align:center;"><span style="font-size:xx-small; color:#ffffff;">hoge</span></div>

今度は画像に関してです。以前にエントリにしたこともありますが、画像の回り込みを3キャリアで共通させる場合、ちょっとクセがあります。

/* 画像回り込み(左) */

<img src="image.jpg" alt="hoge" width="50px" height="50px" style="float:left;" align="left" />hoge

<div style="clear:both;" clear="all">hoge</div>

/* 画像回り込み(右) */

<img src="image.jpg" alt="hoge" width="50px" height="50px" style="float:right;" align="right" />hoge

<div style="clear:both;" clear="all">hoge</div>

EZwebのみfloat指定が出来ないので、ここではalign="left"を含ませるようにします。で、さらに回り込みの解除ですが、PCブラウザの場合、brタグにclearを含ませますが、実はこれがi-modeで使えません。なので、回り込み解除をさせる位置に必ずdivタグを持ってきて、そのdivタグにたいしてclearを含ませる記述をしています。
また、margin-top/margin-right/margin-bottom/margin-leftをstyleに記述する場合もありますが、これもキャリアによって使えないことがあるので、敢えて省いています。
この他にも水平線を入れるhrタグがありますが、基本的には画像で対応するほうがデザイン的にはいいと思っています。使いどころとしては、レイアウト上の微妙な余白を空けたいときでしょうか。
スペーサーとして1px×1pxの透過画像や背景と同一色の画像を使う方法もありますが、多用するとソースが煩雑になる場合が多いので、敢えてhrタグを背景と同一色にして利用するほうが良いかと。
ただ、i-mode2.0で表示した場合、hrタグは上下に0.5emの余白が取られるようになったので、今後はスペーサー画像が主流になるやもしれません。

さらにaタグについておまけ的なところを。
aタグは基本疑似クラスで色の指定を行っています。しかし、サイト内で特定のaタグだけ色を変えたいというのはままある話。そんなときに記述を間違うと色の変更が出来ません。意外にコレに嵌ってる人を見かけます。

<a href="#"><span style="color:#ff0000;">hoge</span></a>

という感じで、aタグの中にspanタグを入れればOK。間違ってaタグの外をspanタグで書こうと疑似クラスで指定した色が適用されます。

大体これくらいのコーディングが出来れば、大概のモバイルサイトは問題ないんじゃないかと。勿論これ以外に様々な利用可能なタグが存在しますが、正味使われてるのってこんなもんですね。liタグなんかは割と画像代用したりしますし。それにstrongタグなんかも使いません。SEO的にはありですが、i-modeでは無視されます。

あとはデザイン面ですが、こればっかりはマニュアルには出来ません。精々文字レイアウト上、1行に収まる文字数を気をつけるとか、3キャリア別に判別するプログラムを使って、絵文字を使うか使わないかとか。まぁ絵文字は個人的に使いたくない派ですけどね。一気にサイトがダサくなるので。そのあたりくらいでしょうかね言えることは。
デザインについては、ホント千差万別。サイトの内容や視覚導線によってレイアウトも工夫しなきゃなりませんから、正解というのがありません。個人でやるならば、よくよく自分と向き合ってデザインを決めることをオススメします。他のモバイルサイトをよく見ておくのも必要だと思います。

related entries

• ブラウザでラジオを視聴できるradiko.jpのAIRアプリが重宝する件(2010.03.16)
• Photo mask brushesを使っていつもの写真を手軽に加工してみるススメ(2010.01.19)
• ケータイサイトにおける水平線実装の3つの方法(2009.12.23)
• ケータイサイトにおけるhtaccessを使ったIP制限のまとめ(2009.12.05)
• キャリア別にhtaccessを使ってユーザーエージェントで振り分ける方法(2009.12.04)