3キャリア対応HTMLの作成について実例をあげて解説している記事「モバゲーのような携帯サイトを作るための12のTips」

2008/7/14 月曜日 Posted in 全キャリア対応, 記事紹介・リンク | No Comments »

先週末からのiPhone騒動で、すっかり紹介しそこなってしまいました。 すでに1000以上のはてぶが付いている状態ですので、みなさんご存じだとは思いますが、良い記事なのでご紹介させていただきます。 →　携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-　モバゲーのような携帯サイトを作るための12のTips [blog59.fc2.com]   モバゲーは、シンプルで見やすい構成ながら、意外と凝った作りとなっており、お手本にはもってこいです。 この記事では、そんなモバゲータウンを参考に、12個の実例を挙げて、3キャリアケータイ向けＨＴＭＬ作成の解説を行っています。 内容は、文字サイズ変更などの基本的なことから、反転文字や水平線、画像の回り込みまで、ケータイサイトを作成する上で必要なエッセンスが網羅されています。 特に「PC向けのHTMLは作成したことがあるが、ケータイは初めて」というような方にぴったりの内容だと思います。 かなり人気のあった記事のようですし、とても役に立ちますので、ぜひ続編を書いて欲しいですね。   関連： モバゲータウンがPCからも閲覧できるようになるようです 他のケータイサイトのHTMLを参考にする際に便利な裏技 ケータイでの画像回り込みについてまとめてみました Read more..

ケータイでの画像回り込みについてまとめてみました

2008/6/11 水曜日 Posted in デザイン | 7 Comments »

本日、ケータイでの「画像の回り込み」に関して調査しましたので、メモを兼ねてまとめてみます。 もちろん、キャリア毎に書き分けてしまっては意味が無いので、3キャリアで共通して使える書き方を調べてみることにしました。   まず問題となったのが、auでfloatが利かないことです。 では、オーソドックスにimgタグのalign属性を使ってみてはどうかということになりますが、今度はドコモ(XHTML)で正しく表示されません。 なかなかやっかいです。 そこで、次のようなサンプルHTMLを作成し、3キャリアでテストを行ってみました。 <img src="test.gif" style="float:left;" align="left" /> あいうえおかきくけこさしすせそたちつてと・・・ こちらの「style」と「align」の部分を変更しながら、きちんと回り込みが行われるかどうか、実機からの確認を行いました。 「style="float:left;"」のみ 「align="left"」のみ 「style="float:left;" align="left"」の併記   結果は次のようになりました。 ドコモ　 　1:○　 　2:×　 　3:○　 au　 　1:×　 　2:○　 　3:○　 ソフトバンク　 　1:○　 　2:○　 　3:○　 結局、両方を併記するほかないようです。 ソフトバンクはオールパスです。（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サイトとこんなに違う！携帯サイトのフォーム設計ポイントとは」 Read more..