ウノウラボさんに、ケータイ向けサイトでのスペーサーの書き方について解説された「I love spacer」という記事がありましたのでご紹介させていただきます。

→　ウノウラボ　I love spacer [labs.unoh.net]

ひとつのHTMLで3キャリアさせようとした場合、<br />での改行では、機種によって見た目が違ってきたり、微妙な余白のスペースが表現できなかったりします。

その際には透過GIF画像を使ってスペーサーを作ることになるのですが、そのテクニック（バッドノウハウ）が紹介されています。

また合わせて、1px画像を使ったラインの引き方も紹介されています。

以前はウノウラボさんには、ケータイネタのエントリーが多数投稿されていたのですが、今回の記事はかなり久しぶりな感じですね。

ケータイ好きとしては寂しいことですが、これも時代の流れなのでしょうがないかもしれません。

関連：

• ケータイサイト作成初心者に役立つ記事「いまからでも遅くない！ケータイデザインの基礎固め」
• ケータイサイトの基本が簡潔にまとめられた良記事「永久保存版！？携帯コーディング、これだけ読めばすぐできる！」
• 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術」

→　case:MobileDesign! モバイルサイトのデザイン紹介ブログ　一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第二弾) [d.hatena.ne.jp]

最近は対応端末がほとんどとなっているためそれほどでもありませんが、tableタグはケータイサイトを作る上ではまりやすいポイントとなっていました。

ドコモ901以前の世代に対応しなくてよいのであれば、表現力の限られるケータイサイトのデザインでは、tableタグをうまく使うことは非常に重要になってきます。

上記のブログを参考に勉強してみてはいかがでしょうか。

関連：

• デザインに優れたケータイサイトをキャプチャ付きで紹介しているサイト「case:MobileDesign! モバイルサイトのデザイン」
• ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
• 見栄えの良いケータイサイトを作るためのポイントがまとめられた記事「一歩上行く！携帯HTML/XHTMLデザイン・コーディング術」

→　これからゆっくり考L +α　携帯サイト[xhtml]のコーディング前のチェックポイント [sakaki0214.com]

前回のHTML編もよかったですが、今回も必要な情報が簡潔にまとめられており、良エントリーとなっていますね。

背景画像やフォント、画像の横幅など、ケータイサイトデザインでは必ず必要になるポイントが抑えられています。

上記ブログはご紹介した記事以外にも、デザインに関する小ネタが幾つも紹介されていてとてもためになります。

デザイナーの方もプログラマの方も、ぜひ一度目を通してみてはいかがでしょうか。

関連：

• ケータイデザインで出来ること出来ないことがまとめられた記事「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」
• ブックレビュー：携帯Webコレクション モバイルデザインアーカイブの本。
• 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」

ケータイデザインで出来ること出来ないことがキレイにまとめられた「携帯サイト（html）の制作に入る前に確認しておきたいチェック項目」というエントリーです。

→　これからゆっくり考L　携帯サイト（html）の制作に入る前に確認しておきたいチェック項目 [sakaki0214.com]

ケータイサイトでは、どうしても実現しづらいデザインというものがあります。
このエントリーでは、ケータイで表現できないようなデザイン案をもらわないように、デザインファイルをもらった時にバーッと見てチェックすべき箇所をまとめているとのことです。

詳細は上記ブログ内でサンプルサイト付きで解説されているので、そちらを見ていただくとして、チェックポイントを簡単に引用させていただくと、次のようになっています。

• tableの使用はOKか
• 背景色を複数色使っていないか
• 枠線を使っていないか
• サムネイル画像の横にテキストが来るパターン
• リストアイコンの下に文字が回り込んでくるかどうか
• ページの左右に微妙な余白が空いていないか
• フォントサイズは2段階ないし1段階か
• 太字を使っていないか

※非常に細かい話ですが、上記エントリー内では902がテーブルが利用不可と書かれていますが、902はiモード対応HTML6.0なので全機種でtableタグが利用できるはずです。

このブログの書き手はコーダーさんとのことで、ならではの視点で良エントリーとなっていますね。

最近はケータイサイトでもかなり凝ったデザインが求められるようになってきていますので、デザインのやり取りが発生する際のチェック項目として活用してみてはいかがでしょうか。

関連：

• ケータイ3キャリアに対応するためのDOCTYPE宣言について
• 3キャリアのキャプチャを撮って保存してくれるサービス「モバミル」
• ドコモ端末でCSSを利用するには

すでに1000以上のはてぶが付いている状態ですので、みなさんご存じだとは思いますが、良い記事なのでご紹介させていただきます。

→　携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-　モバゲーのような携帯サイトを作るための12のTips [blog59.fc2.com]

モバゲーは、シンプルで見やすい構成ながら、意外と凝った作りとなっており、お手本にはもってこいです。
この記事では、そんなモバゲータウンを参考に、12個の実例を挙げて、3キャリアケータイ向けＨＴＭＬ作成の解説を行っています。

内容は、文字サイズ変更などの基本的なことから、反転文字や水平線、画像の回り込みまで、ケータイサイトを作成する上で必要なエッセンスが網羅されています。

特に「PC向けのHTMLは作成したことがあるが、ケータイは初めて」というような方にぴったりの内容だと思います。

かなり人気のあった記事のようですし、とても役に立ちますので、ぜひ続編を書いて欲しいですね。

関連：

• モバゲータウンがPCからも閲覧できるようになるようです
• 他のケータイサイトのHTMLを参考にする際に便利な裏技
• ケータイでの画像回り込みについてまとめてみました

もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。

まず問題となったのが、auでfloatが利かないことです。
では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。
なかなかやっかいです。

そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。

<img src="test.gif" style="float:left;" align="left" />
あいうえおかきくけこさしすせそたちつてと・・・

こちらの「style」と「align」の部分を変更しながら、きちんと回り込みが行われるかどうか、実機からの確認を行いました。

1. 「style=”float:left;”」のみ
2. 「align=”left”」のみ
3. 「style=”float:left;” align=”left”」の併記

結果は次のようになりました。

結局、両方を併記するほかないようです。
ソフトバンクはオールパスです。（PCも当然オールパスでした）

さて続いて、回り込みの解除です。

<br clear="all" style="clear:both;" />

のように書けばOKと思ったのですが、ドコモで解除が行われませんでした。

仕様を読んでみるとXHTMLでは、clearはブロック要素に書かなくてはならないとあります。
ですので、次のようにdivタグで書いてみました。

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

※<div />という書き方は出来ないのでは、というご指摘をいただきましたので、修正しました。

ということでまとめとしては、次のように書けば3キャリアに対応した画像回り込み＆解除が行えるようです。

<img src="test.gif" style="float:left;" align="left" />
あいう
<div clear="all" style="clear:both;"></div>
えおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br />

きちんと表示されました。

関連：

• 他のケータイサイトのHTMLを参考にする際に便利な裏技
• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」