ke-tai.org ケータイサイト開発に関わる記事・情報を紹介

本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。

もちろん、キャリア毎に書き分けてしまっては意味が無いので、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サイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」

本日は、ケータイサイトのHTMLを作成する際に便利な、Tips的なものをご紹介します。

ケータイサイトはPCサイトと違って、HTMLソースを見ることができません。
たとえPCのブラウザから見たとしても、大手サイトはIPアドレスによる制限がかけられていて、ソースが見れるケースはまずありません。

ですので、HTMLがどのように作られているのかは、よくわからないことが多いと思います。

ご存じ「モバゲーTOWN」を例にご説明します。

例えば中央の点線や、「楽しもう」の上下の細い黒線は、どうやって書いているんでしょうか？
画面上から見ただけでは、正直よくわかりません。

そんな時に役立つのが、「画像を保存」機能です。

これを使えば、CSSで書かれているのか、画像なのかがわかります。

点線は画像でした

またスペーサー画像の位置もバッチリわかります。

中央にある緑のカーソルがあたった部分がスペーサー画像

モバゲーTOWNでは、トップページだけでも、10ヶ所以上ものスペーサー画像が使われていることがわかります。
（おそらくドコモ端末で、marginやpaddingが、効かないためだと思われます）

他ケータイサイトのデザインを参考にする際には、ぜひ活用してみてください。

関連：

• フォームでのユーザビリティ向上のポイントを紹介した記事「PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」
• モバゲーのフレームワークがオープンソースとして公開されました
• ブックレビュー： 勝手サイト - 先駆者が明かすケータイビジネスの新機軸