当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、
『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』
っていう質問を最近良く受けます。
おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような
位置づけになってきているのでしょうか。
確かに、携帯サイトを作ってきている身としても、
モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。
ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。
ちなみに、左のスクリーンショットは、自分が似せて作った偽モバゲーのサイトの画像。おそらく、本家と変わらないデザインとなっていると思います。
なお、本来なら、HTMLやCSSのコードを公開してしまうほうが理解という意味では、最善だとは思うのですが、それをしてしまうとそのまま他のサイトにアップロードして、悪用する輩が必ず現れるので、残念ですが、公開はできません。コードを公開することは目的ではありませんし、悪用されることは本意ではありませんので、何卒ご理解ください。
さて、では順に説明していきます。なお、今回のサイトは3キャリア対応版ということで、1枚のHTMLですべて完成させています。
Tips 1. XHTMLで作成する。
画面の「新着ﾆｭｰｽ」や「お知らせ」にあるように、ブロックレベル要素に背景をつけるためには、ドコモではXHTMLで書かなければなりません。TABLEタグを使用することもできますが、その場合だと対応する端末の敷居を高くする結果となるので、XHTMLで全体をコーディングする必要があります。
XHTMLでHTMLを書くにはPC向けとは異なり、少々テクニックが必要です。これについては、前回の記事で詳しく書きましたので、そちらをご覧ください。
参照） iモードHTMLとiモードXHTMLを正しく切り替える方法
Tips 2. キャリアごとの仕様の差は外部CSSで。
モバゲーのように文字を1段階小さくして全体のテキストを表示する場合など、キャリアごとに若干差が出てきてしまう場合もあります。この場合、特に（ドコモ）と（au・ソフトバンク）に差がでることが多いので、こういうケースでは、外部CSSを読めるブラウザ（au・ソフトバンク）と読めないブラウザ（ドコモ）
の仕様の差を埋めるために、あえて外部CSSを読み込ませ、こちらにau、ソフトバンク向けのスタイルを記述することで解決します。
参考） 外部CSSの読み込み有無で微妙なレイアウトの違いを出す
Tips 3. 文字サイズを1段階小さくするには
（補足有り）
文字を小さくして表示するサイトも最近はよく見かけます。サイト全体の文字を一括で指定する方法は残念ながらありません。これは、ドコモが対応していないから。BODYタグに、インラインCSSで「font-size:smaller;」のように記述できないからです。
なので、これは文字ごとに指定してやるしかないです。
ではどうするかというと、私はこう書きました。たとえば、画像の「[マイページ ｜ 友達紹介]」の部分は、
と書いてます。ここで、DIVタグのclass属性の「small」は外部CSSにスタイルを記述していますが、
そこには以下のように書いています。
外部CSSが読み込まれるauとソフトバンク携帯の場合、文字サイズが12ptという情報が初期の段階で読み込まれます。一方、ドコモではこの情報は無視されますが、SPANタグに書いたインラインCSSで文字サイズを一段階小さくする記述をしているので、文字は小さくなる。なお、このSPANタグのCSSは逆にauでは読めません。smallerという相対指定なので、auとソフトバンク端末では追加指定（+smaller）として読み込まれ、12pt+smallerで文字が小さくなって表示されます。（この方法では一部機種では2段階文字が小さくなる場合があります。）
※追記
ごめんなさい。ちょっと誤解を招く書き方をしてしまいました。
CSSによる携帯サイトの文字サイズ指定については後日改めて記事にします。
※さらに追記
どうやら、以下のようにDIVタグにfont-sizeプロパティを指定して、bodyタグ以下の属性として
記述してやれば、全体で文字サイズを指定することも可能な様子。
BODYタグに記述しても不可なのは確かですが、この方法なら簡単ですね。
ドコモの仕様ではSPANタグしかfont-sizeは指定できないって書いてあるのに…
Tips 4. ロゴ画像のサイズは横240ピクセル
最近の携帯はほとんどが横240ピクセルより高解像度化していますが、auやドコモのブラウザでは、画像を自動的に拡大縮小する機能が備わっており、横240ピクセルで作っておけば、大抵は画面ピッタリに収まるようになっています。ただし、ソフトバンクは高解像度のまま表示する他に合わせないKYな仕様をしている端末もあり、240ピクセルでは画像が小さく表示されてしまう端末もありました。
参考） 3キャリア対応サイトを作る際の注意点 （画像フォーマット編）
Tips 5. 流れる文字はDIVタグで
実際のモバゲーにはないのですが、電光掲示板のような流れる文字を表示させることもできます。この場合、HTMLタグにマーキータグがありますが、今回はXHTMLで書いているので、以下のようにDIVタグを使いました。
参考） 狭くて小さな画面だからこそ携帯に適したマーキー（marquee）タグ
Tips 6. 反転文字
「新着ﾆｭｰｽ」のような背景をつけた反転文字はどのように表現するかというと、
としてます。
背景はDIVタグにbackground-colorプロパティでCSSで指定します。ここで、同時に、文字の色も指定すれば、もっと単純化できますが、colorプロパティをDIVタグに書いてもドコモでは読み込まないので、別途SPANタグで文字カラーを指定します。
※追記
ドコモでもcolorプロパティはDIVタグに適用できるので、一度に併記しても構いません。
参考） iモードHTMLとiモードXHTMLを正しく切り替える方法
Tips 7. 色つき水平線
（補足有り）
新着ﾆｭｰｽの帯の前後についている背景の水平線（区切り線）はどのように表現するかというと、
ここでの各キャリアのポイントは以下です。
●ドコモ
XHTMLではすべての属性に非対応
●ソフトバンク
・けい線の上下にマージンがとられる
・hrの余白調整はmargin／paddingプロパティで対応可能
・陰をなくすnoshadeに対応
●au
・ライン色はcolorプロパティで対応
・au以外のキャリアのライン色はbackgroundプロパティで対応
・heightプロパティは非対応（size属性で縦方向の長さを指定）
・borderプロパティは非対応（au以外はけい線の境界線を指定可）
・text-alignプロパティはauのみ対応（au以外はalign属性を使用）
Tips 8. 右寄せ
（補足有り）
画像中の「もっと見る」にあるように、右寄せで文字を表示させる方法は、CSSで「text-align」プロパティを用いるのが良いと思われます。したがって、
とするのが一般的です。中央揃えの場合はCENTERタグを使うこともできますが、XHTMLでは古いので、こちらのほうがよいでしょう。ちなみに。DIVタグではなく、SPANタグで囲む方法もありますが、本来「text-align」プロパティはブロックレベル要素にしか適用できないので、誤用となります。
Tips 9. 画像の回り込み
（補足有り）
画像中のエンタメ内にあるように、画像に文字を回り込ませて、たとえば、モバゲーのように画像の右側に文字を回り込ませる方法は以下。
です。ここでのポイントは、2つ。
まず、通常回り込みを行う場合は、DIVタグなどにfloatプロパティを用いて実現しますが、auなどではfloatプロパティに対応していないので、上記のようにドコモ用にインラインCSSでIMGタグにfloatプロパティで回り込みさせ、一方au向けにはIMGタグのalign属性で同様に指定します。
そして回り込みを解除したい位置で<br clear="all" />します。
また、その他の方法として、TABLEタグを使って、擬似的な回り込みを実現する方法もありますが、TABLEタグに対応していない端末が多いので、避けるべきです。
参考） Openwave XHTML Mobile Profile レファレンス
Tips 10. 携帯サイトは文字でデザインする！
携帯サイトは文字でデザインするといっても過言ではなく、改行せずに画面いっぱいに表示できる文字数は決まっているので、できる限り文字を短くし、他と文字数が揃うように調整してやりながら、全体としてみたときに上手く調和がとれている必要があります。
参考） 半角カナのなせる技～オシャレかつスマートに着飾る魅力
たとえば、コミュニティー＆アバター内の「友達検索～友達を誘おう」までの部分を見てください。
メニューとそのメニューの説明が「：」を境に区切られ、しかも全体が揃っているため、見やすくなっています。これをコーディングする際、通常はTABLEタグを使う発想が考えられますが、たぶんモバゲーもTABLEタグは使用していないでしょう。
たとえば、友達検索の部分では、単に
として、文字が一文字分足らない「タウン」の部分は、
として、タウンの文字の後に単に全角スペースを挿入するに過ぎません。
でも、これでも携帯サイトの場合はOKでしょう。
また、「サークル」の部分では、本来携帯サイトは文字幅の節約をするために、「ｻｰｸﾙ」のようにカタカナは半角で表示するテクニックが使われますが、今回のように「：」までの文字数はモバゲーの場合は4文字にしているので、あえてサークルを全角で書いているのだと思います。
Tips 11. フッターは最後に。そして質素に。
お問い合わせや利用規約など、あまり読まれないようなリンク先は通常フッターにもってくるのが、普通です。携帯サイトは極端に縦に長いですし、上から順に目を通していくので、あまり目立たせる必要のないメニューはフッターでよいでしょう。また、目立たせる必要がありませんので、背景をつけたり、文字を大きくしたりする必要もなく、簡素に書くことも必要だと思います。
Tips 12. 絵文字のちょっとしたテクニック
ドコモやソフトバンクの絵文字は、文字を一段階小さくした場合でも、そのタグの中に収められた絵文字は文字と同じように縮小されて表示されます。
一方で、auの場合、auの技術情報にあるようにau向けの絵文字を表示させる場合のタグは、
としますが、この場合だと、絵文字は端末内から呼び出されるので、文字と同じようには縮小されません。つまり、
と表記しても、文字は小さくなっても、絵文字は小さくなりません。
これを回避するためには、あえてドコモの絵文字を記述し、auのサーバー側で絵文字をau向けに自動変換させる方法があります。この場合であれば、ドコモの絵文字の記述方法でauに対応させることもできますし、絵文字を縮小表示させることができるので一石二鳥です。
なお、このブログで以前紹介した、携帯絵文字変換スクリプトの改良版では、この縮小表示に対応していますので、もしご興味があれば使用してみてはいかかがでしょうか。
参考） 携帯絵文字変換スクリプト改良版の配布 （3キャリア対応 - PHP）
長くなってしまいましたが、今回はこのへんで。
携帯サイトは仕様が乱立しているだけに、なかなか一筋縄ではいきませんね（笑）
■書籍を出版！
携帯サイト制作について、もっと詳しく書かれた制作本を出版しました。
まだゲットしてない方はぜひ！
初の単著です。
携帯サイト コーディング＆デザイン
ソフトバンククリエイティブ
高木 悠介
------------------補足情報 （8月19日）------------------
記事を投稿してからある程度メールやコメントなどでツッコミをいただき、
情報がまとまってきたので、ここで一度補足しておきます。
1. ソフトバンクのVGA端末のKYっぷりをなんとかして
この記事の次でPHPスクリプトを使った解決方法をまとめてみました。
静的なHTMLで対応させるのはやはり難しいようです。
2. HRタグを使うよりスペーサー.gifを使うほうが一般的なのでは
モバゲーのように区切り線を使って段落を分ける場合、HRタグを使うより、spacer.gifを使った方がよいのでは？という指摘がありました。
たぶんご指摘の方法が一般的ですね。ただ、こちらで改めて複数の端末で確認したところ、auとソフトバンクはspacerは使っていませんでした。たぶん、これらのキャリアはCSSで対応させて、ドコモの場合はスペーサーを使ってるかもしれませんね。
3. 12pt+smallerは文字が2段階下がることもある
これは、こちらの書き方が悪かったですね。申し訳ありません。確かに、ソフトバンクの携帯ではCSSの挙動に正確な機種が多いので、この指定方法だと文字サイズが2段階下がる機種も多いです。ただ、私が調べた限りではこの方法がキャリア間の違いが一番少ない指定方法だったので。
ちなみに、実機のソフトバンク携帯で実際のモバゲーを見たのですが、見事に文字サイズが2段階下がってました。機種の文字サイズ設定にもよるので、このへんは大目に見る必要があるのかも。とりあえず上記のTipsはタイトルを修正させていただきました。
もし、1枚のHTMLとCSSで文字サイズを全ての機種で1段階下げる方法を知っている方はぜひ教えてください。もちろんプログラムを使用しないという条件付きでお願いします。
改めて文字サイズについては新しい記事でまとめる予定です。
4. XHTMLはmova非対応
ご指摘はおっしゃるとおりですが、今回の記事の目的はあくまで「モバゲーのようなサイトを作るには」がテーマですので、DIVタグを使った反転文字等の関係で、省略させていただきました。
5. docomoは<br clear="all" />で回り込みを解除できないよ！
仰せの通りです。訂正させてください。
ご指摘の通り、ドコモでは<br clear="all" />だけでは解除できません。
回り込みを正しく解除するには2通りの方法があります。1つは回り込み解除位置の次にHRタグを使用する方法。この場合であれば、HRタグによって<br clear="all" />はなくてもドコモでもauでも回り込みは解除されます。
2つ目は回り込みを解除したい位置の次にくる要素をDIVタグで囲み、以下のように回り込みを解除する方法です。回り込みを解除する位置に<br clear="all" />は必要ありませんが、古い機種も考えると入れておいたほうがよいです。
ちなみに、画像と回り込みさせる文字のほう側をDIVタグなどのブロックレベル要素で囲ってあげでもドコモでは回り込みは解除できません。また、2つめの方法だとauでは改行されないという指摘がありましたが、そのような現象は確認できませんでした。
『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』
っていう質問を最近良く受けます。
おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような
位置づけになってきているのでしょうか。
モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。
ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。
ちなみに、左のスクリーンショットは、自分が似せて作った偽モバゲーのサイトの画像。おそらく、本家と変わらないデザインとなっていると思います。
なお、本来なら、HTMLやCSSのコードを公開してしまうほうが理解という意味では、最善だとは思うのですが、それをしてしまうとそのまま他のサイトにアップロードして、悪用する輩が必ず現れるので、残念ですが、公開はできません。コードを公開することは目的ではありませんし、悪用されることは本意ではありませんので、何卒ご理解ください。
さて、では順に説明していきます。なお、今回のサイトは3キャリア対応版ということで、1枚のHTMLですべて完成させています。
Tips 1. XHTMLで作成する。
画面の「新着ﾆｭｰｽ」や「お知らせ」にあるように、ブロックレベル要素に背景をつけるためには、ドコモではXHTMLで書かなければなりません。TABLEタグを使用することもできますが、その場合だと対応する端末の敷居を高くする結果となるので、XHTMLで全体をコーディングする必要があります。
XHTMLでHTMLを書くにはPC向けとは異なり、少々テクニックが必要です。これについては、前回の記事で詳しく書きましたので、そちらをご覧ください。
参照） iモードHTMLとiモードXHTMLを正しく切り替える方法
Tips 2. キャリアごとの仕様の差は外部CSSで。
モバゲーのように文字を1段階小さくして全体のテキストを表示する場合など、キャリアごとに若干差が出てきてしまう場合もあります。この場合、特に（ドコモ）と（au・ソフトバンク）に差がでることが多いので、こういうケースでは、外部CSSを読めるブラウザ（au・ソフトバンク）と読めないブラウザ（ドコモ）
の仕様の差を埋めるために、あえて外部CSSを読み込ませ、こちらにau、ソフトバンク向けのスタイルを記述することで解決します。
参考） 外部CSSの読み込み有無で微妙なレイアウトの違いを出す
Tips 3. 文字サイズを
（補足有り）
文字を小さくして表示するサイトも最近はよく見かけます。サイト全体の文字を一括で指定する方法は残念ながらありません。これは、ドコモが対応していないから。BODYタグに、インラインCSSで「font-size:smaller;」のように記述できないからです。
なので、これは文字ごとに指定してやるしかないです。
ではどうするかというと、私はこう書きました。たとえば、画像の「[マイページ ｜ 友達紹介]」の部分は、
<div style="text-align:center;" class="small">
<span style="font-size:smaller;">[<a href="test.html">マイページ</a> | <a href="test.html">友達紹介/a>]</span>
</div>
と書いてます。ここで、DIVタグのclass属性の「small」は外部CSSにスタイルを記述していますが、
そこには以下のように書いています。
.small {
font-size:12pt;
}
外部CSSが読み込まれるauとソフトバンク携帯の場合、文字サイズが12ptという情報が初期の段階で読み込まれます。一方、ドコモではこの情報は無視されますが、SPANタグに書いたインラインCSSで文字サイズを一段階小さくする記述をしているので、文字は小さくなる。なお、このSPANタグのCSSは
※追記
ごめんなさい。ちょっと誤解を招く書き方をしてしまいました。
CSSによる携帯サイトの文字サイズ指定については後日改めて記事にします。
※さらに追記
どうやら、以下のようにDIVタグにfont-sizeプロパティを指定して、bodyタグ以下の属性として
記述してやれば、全体で文字サイズを指定することも可能な様子。
BODYタグに記述しても不可なのは確かですが、この方法なら簡単ですね。
ドコモの仕様ではSPANタグしかfont-sizeは指定できないって書いてあるのに…
<body>
<div style="font-size:small;">
本文
</div>
</body>
Tips 4. ロゴ画像のサイズは横240ピクセル
最近の携帯はほとんどが横240ピクセルより高解像度化していますが、auやドコモのブラウザでは、画像を自動的に拡大縮小する機能が備わっており、横240ピクセルで作っておけば、大抵は画面ピッタリに収まるようになっています。ただし、ソフトバンクは高解像度のまま表示する他に合わせないKYな仕様をしている端末もあり、240ピクセルでは画像が小さく表示されてしまう端末もありました。
参考） 3キャリア対応サイトを作る際の注意点 （画像フォーマット編）
Tips 5. 流れる文字はDIVタグで
実際のモバゲーにはないのですが、電光掲示板のような流れる文字を表示させることもできます。この場合、HTMLタグにマーキータグがありますが、今回はXHTMLで書いているので、以下のようにDIVタグを使いました。
参考） 狭くて小さな画面だからこそ携帯に適したマーキー（marquee）タグ
<div style="display:-wap-marquee;">
この画面はﾓﾊﾞｹﾞｰﾀｳﾝに似せて作ったﾃｽﾄ画面です。
</div>
Tips 6. 反転文字
「新着ﾆｭｰｽ」のような背景をつけた反転文字はどのように表現するかというと、
<div style="text-align:center;background-color:#007128;">
<span style="color:white;">新着ニュース</span>
</div>
としてます。
背景はDIVタグにbackground-colorプロパティでCSSで指定します。
※追記
ドコモでもcolorプロパティはDIVタグに適用できるので、一度に併記しても構いません。
参考） iモードHTMLとiモードXHTMLを正しく切り替える方法
Tips 7. 色つき水平線
（補足有り）
新着ﾆｭｰｽの帯の前後についている背景の水平線（区切り線）はどのように表現するかというと、
としました。<hr size="1" style="width:100%;height:1px;margin:2px 0;padding:0;color:blue;background:blue;border:1px solid blue;" />
ここでの各キャリアのポイントは以下です。
●ドコモ
XHTMLではすべての属性に非対応
●ソフトバンク
・けい線の上下にマージンがとられる
・hrの余白調整はmargin／paddingプロパティで対応可能
・陰をなくすnoshadeに対応
●au
・ライン色はcolorプロパティで対応
・au以外のキャリアのライン色はbackgroundプロパティで対応
・heightプロパティは非対応（size属性で縦方向の長さを指定）
・borderプロパティは非対応（au以外はけい線の境界線を指定可）
・text-alignプロパティはauのみ対応（au以外はalign属性を使用）
Tips 8. 右寄せ
（補足有り）
画像中の「もっと見る」にあるように、右寄せで文字を表示させる方法は、CSSで「text-align」プロパティを用いるのが良いと思われます。したがって、
<div style="text-align:right;">
<a href="test.html">もっと見る</a>
</div>
とするのが一般的です。中央揃えの場合はCENTERタグを使うこともできますが、XHTMLでは古いので、こちらのほうがよいでしょう。ちなみに。DIVタグではなく、SPANタグで囲む方法もありますが、本来「text-align」プロパティはブロックレベル要素にしか適用できないので、誤用となります。
Tips 9. 画像の回り込み
（補足有り）
画像中のエンタメ内にあるように、画像に文字を回り込ませて、たとえば、モバゲーのように画像の右側に文字を回り込ませる方法は以下。
<img src="./images/firefox.jpg" width="50" height="50" alt="" style="float:left;margin-top:3px;margin-right:3px;margin-bottom:8px;" align="left" border="0" /><a href="game.html">ゲーム</a><br />ﾊﾞｽｹで給料UP!?<br clear="all" />
です。ここでのポイントは、2つ。
まず、通常回り込みを行う場合は、DIVタグなどにfloatプロパティを用いて実現しますが、auなどではfloatプロパティに対応していないので、上記のようにドコモ用にインラインCSSでIMGタグにfloatプロパティで回り込みさせ、一方au向けにはIMGタグのalign属性で同様に指定します。
そして回り込みを解除したい位置で<br clear="all" />します。
また、その他の方法として、TABLEタグを使って、擬似的な回り込みを実現する方法もありますが、TABLEタグに対応していない端末が多いので、避けるべきです。
参考） Openwave XHTML Mobile Profile レファレンス
Tips 10. 携帯サイトは文字でデザインする！
携帯サイトは文字でデザインするといっても過言ではなく、改行せずに画面いっぱいに表示できる文字数は決まっているので、できる限り文字を短くし、他と文字数が揃うように調整してやりながら、全体としてみたときに上手く調和がとれている必要があります。
参考） 半角カナのなせる技～オシャレかつスマートに着飾る魅力
たとえば、コミュニティー＆アバター内の「友達検索～友達を誘おう」までの部分を見てください。
メニューとそのメニューの説明が「：」を境に区切られ、しかも全体が揃っているため、見やすくなっています。これをコーディングする際、通常はTABLEタグを使う発想が考えられますが、たぶんモバゲーもTABLEタグは使用していないでしょう。
たとえば、友達検索の部分では、単に
友達検索：友達探そう
として、文字が一文字分足らない「タウン」の部分は、
タウン ：身近な仲間も!?
として、タウンの文字の後に単に全角スペースを挿入するに過ぎません。
でも、これでも携帯サイトの場合はOKでしょう。
また、「サークル」の部分では、本来携帯サイトは文字幅の節約をするために、「ｻｰｸﾙ」のようにカタカナは半角で表示するテクニックが使われますが、今回のように「：」までの文字数はモバゲーの場合は4文字にしているので、あえてサークルを全角で書いているのだと思います。
Tips 11. フッターは最後に。そして質素に。
お問い合わせや利用規約など、あまり読まれないようなリンク先は通常フッターにもってくるのが、普通です。携帯サイトは極端に縦に長いですし、上から順に目を通していくので、あまり目立たせる必要のないメニューはフッターでよいでしょう。また、目立たせる必要がありませんので、背景をつけたり、文字を大きくしたりする必要もなく、簡素に書くことも必要だと思います。
Tips 12. 絵文字のちょっとしたテクニック
ドコモやソフトバンクの絵文字は、文字を一段階小さくした場合でも、そのタグの中に収められた絵文字は文字と同じように縮小されて表示されます。
一方で、auの場合、auの技術情報にあるようにau向けの絵文字を表示させる場合のタグは、
<img localsrc="絵文字番号" />
としますが、この場合だと、絵文字は端末内から呼び出されるので、文字と同じようには縮小されません。つまり、
<div style="font-size:10pt;"><img localsrc="絵文字番号" />文字</div>
と表記しても、文字は小さくなっても、絵文字は小さくなりません。
これを回避するためには、あえてドコモの絵文字を記述し、auのサーバー側で絵文字をau向けに自動変換させる方法があります。この場合であれば、ドコモの絵文字の記述方法でauに対応させることもできますし、絵文字を縮小表示させることができるので一石二鳥です。
なお、このブログで以前紹介した、携帯絵文字変換スクリプトの改良版では、この縮小表示に対応していますので、もしご興味があれば使用してみてはいかかがでしょうか。
参考） 携帯絵文字変換スクリプト改良版の配布 （3キャリア対応 - PHP）
長くなってしまいましたが、今回はこのへんで。
携帯サイトは仕様が乱立しているだけに、なかなか一筋縄ではいきませんね（笑）
■書籍を出版！
携帯サイト制作について、もっと詳しく書かれた制作本を出版しました。
まだゲットしてない方はぜひ！
初の単著です。
携帯サイト コーディング＆デザイン
ソフトバンククリエイティブ
高木 悠介
------------------補足情報 （8月19日）------------------
記事を投稿してからある程度メールやコメントなどでツッコミをいただき、
情報がまとまってきたので、ここで一度補足しておきます。
1. ソフトバンクのVGA端末のKYっぷりをなんとかして
この記事の次でPHPスクリプトを使った解決方法をまとめてみました。
静的なHTMLで対応させるのはやはり難しいようです。
2. HRタグを使うよりスペーサー.gifを使うほうが一般的なのでは
モバゲーのように区切り線を使って段落を分ける場合、HRタグを使うより、spacer.gifを使った方がよいのでは？という指摘がありました。
たぶんご指摘の方法が一般的ですね。ただ、こちらで改めて複数の端末で確認したところ、auとソフトバンクはspacerは使っていませんでした。たぶん、これらのキャリアはCSSで対応させて、ドコモの場合はスペーサーを使ってるかもしれませんね。
3. 12pt+smallerは文字が2段階下がることもある
これは、こちらの書き方が悪かったですね。申し訳ありません。確かに、ソフトバンクの携帯ではCSSの挙動に正確な機種が多いので、この指定方法だと文字サイズが2段階下がる機種も多いです。ただ、私が調べた限りではこの方法がキャリア間の違いが一番少ない指定方法だったので。
ちなみに、実機のソフトバンク携帯で実際のモバゲーを見たのですが、見事に文字サイズが2段階下がってました。機種の文字サイズ設定にもよるので、このへんは大目に見る必要があるのかも。とりあえず上記のTipsはタイトルを修正させていただきました。
もし、1枚のHTMLとCSSで文字サイズを全ての機種で1段階下げる方法を知っている方はぜひ教えてください。もちろんプログラムを使用しないという条件付きでお願いします。
改めて文字サイズについては新しい記事でまとめる予定です。
4. XHTMLはmova非対応
ご指摘はおっしゃるとおりですが、今回の記事の目的はあくまで「モバゲーのようなサイトを作るには」がテーマですので、DIVタグを使った反転文字等の関係で、省略させていただきました。
5. docomoは<br clear="all" />で回り込みを解除できないよ！
仰せの通りです。訂正させてください。
ご指摘の通り、ドコモでは<br clear="all" />だけでは解除できません。
回り込みを正しく解除するには2通りの方法があります。1つは回り込み解除位置の次にHRタグを使用する方法。この場合であれば、HRタグによって<br clear="all" />はなくてもドコモでもauでも回り込みは解除されます。
2つ目は回り込みを解除したい位置の次にくる要素をDIVタグで囲み、以下のように回り込みを解除する方法です。回り込みを解除する位置に<br clear="all" />は必要ありませんが、古い機種も考えると入れておいたほうがよいです。
<br clear="all" />
<div style="clear:both;">
次にくる内容
</div>
ちなみに、画像と回り込みさせる文字のほう側をDIVタグなどのブロックレベル要素で囲ってあげでもドコモでは回り込みは解除できません。また、2つめの方法だとauでは改行されないという指摘がありましたが、そのような現象は確認できませんでした。
37
 |
|
 参考になりました はじめまして、書籍を買ってみようと思ってます。こちらのサイトはよく拝見してます。これからも遊びにきます。
hrのドコモでの対応について 参考にさせて頂きました。
ただ、自分でコーディングする際に行っている事ですが、 ドコモ端末では ｈｒタグは <hr style="background-color:#E9546A; border-color:#E9546A; height:2px;" /> とすれば色などの指定はできます。 ただし、height:1px（高さを指定しなかった場合）は色は反映されません。 LALA | URL | 2009/12/01/Tue 14:44 [EDIT]
初めまして♪ モバイルサイトはまだまだ知らないことが沢山あるので、
とっても参考になりました！ ありがとうございました♪ ただ…。 私には、ちょっと難しい様です（涙） 参考になりました。 携帯サイトってどうやって作ったらいいのかわからなかったのでとても参考になりました。
ソースが見れれば理解もできるのですが、最近の携帯サイトはPCで見れないようにしているみたいですし・・・ 携帯サイトも外部CSSが読み込めるとは知りませんでした。 でも、ドコモは無理なんですよね。 ちょっと、携帯サイト作成にも挑戦してみたくなりました。 参考にさせてもらいます。ありがとうございました。 いつも拝見しております。 shibaさん、いつも参考にさせていただいております。
とてもわかりやすくて、勉強になっております。 今回どうしても自分の携帯サイトに実現したいﾃﾞｻﾞｲﾝがあるのですがいろいろと試してみているのですがどうしてもできません。 『レコチョク コミック』の「TOP」「女性向」「男性向」･･･のタグと下のライン部分ですが、ﾃｰﾌﾞﾙを使っていそうなのですが、ドコモだと1pxのラインが入ってしまうので、ﾃｰﾌﾞﾙをどうやって組んでも実現できません。 <span>で組んでいるのかと文字サイズを変えてみて画面を確認すると、横ｻｲｽﾞは決まっているようなのでやはりテーブルかと思っています。 どうやって組んでいるのでしょうか？ すごく悩んでいます。よろしくお願いします。 sonopy | URL | 2009/08/11/Tue 11:36 [EDIT]
Googleで検索して訪問しました
モバゲーのようなサイトを作る説明があるのかと思ったら モバゲーのようなデザインだったんですね でも勉強になりました ありがと ゆう | URL | 2009/01/23/Fri 15:11 [EDIT]
Re : こんにちは！ モモさん
書き込みありがとうございます。 また、ご購入ありがとうございます！ 素敵なサイトができるとよいですね。 少しでもお役に立てればうれしいです。 読み終えましたら、ぜひ感想お聞かせください。 それでは！ shiba | URL | 2009/01/14/Wed 12:59 [EDIT]
こんにちは！ ちょくちょくおじゃましています、モモと申します^^
久しぶりにお邪魔しましたら、本が出ているとのことで！ おめでとうございます！（早速買いに行きます♪） 趣味でモバイルサイトを作っているのですが、相変わらずソフトバンクは何をするにも難しいですね。 これからもがんばってください＾＾ Re : AUで半角カタカナで変な改行 haruさん。
書き込みありがとうございます。 au携帯のブラウザは、半角カナが他の文字と併せて1行に収まりきらない場合、 文字の読みにくさを回避するために、カナが全て次行に改行されるような仕様になっています。 ですから、例えば、ある端末の1行に収まる最大文字数が全角10字だったとしましょう。 今週の最新ﾄﾋﾟｯｸｽﾆｭｰｽ。（全角10.5文字、半角21文字相当） という文字を表示した場合は「最新」の位置で改行されます。 shiba | URL | 2008/12/14/Sun 02:03 [EDIT]
AUで半角カタカナで変な改行 はじめまして
AUのケータイですが、仮に 今週のﾄﾋﾟｯｸｽと打ち込んだら 今週の ﾄﾋﾟｯｸｽ と「今週の」と「ﾄﾋﾟｯｸｽ」の間で改行されてしまいます。 何故でしょう？ すごく悩んでいます。 もし、ご存知でしたらお教えください。 よろしくお願いします。 haru | URL | 2008/12/13/Sat 08:44 [EDIT]
marquee 手元の au 機では、
<div style="display:-wap-marquee;"> この画面はﾓﾊﾞｹﾞｰﾀｳﾝに似せて作ったﾃｽﾄ画面です。 </div> では、文字が流れないようです。 <marquee> この画面はﾓﾊﾞｹﾞｰﾀｳﾝに似せて作ったﾃｽﾄ画面です。 </marquee> では流れます。 ---- 上記は勘違いで、一回流れた後に止まっていただけでした。 ほげお | URL | 2008/08/27/Wed 02:40 [EDIT]
Re : 「auで改行されない」について sezuさん
書き込みとはてブでのご指摘ありがとうございます。 おかげでこの部分について訂正できたので感謝しています。 >改行のためだけのブロックを置いたところ なるほど、そのような意味だったのですね。 確かに、その方法であれば改行が正しく行われない可能性がありそうです。 空DIVは気持ち悪いですから、やはりその後の文章にDIVタグクリアをしてあげるとよいようです。 ありがとうございました！ shiba | URL | 2008/08/25/Mon 21:05 [EDIT]
「auで改行されない」について 大変お世話になってます。
はてブでコメントした点についての対応、ありがとうございます。 >また、2つめの方法だとauでは改行されないという指摘がありましたが、そのような現象は確認できませんでした。 <br clear="all" />のかわりに <div clear="all" style="clear:both;"></div> という回り込み解除と改行のためだけのブロックを置いたところ、改行が行われなかったので、単純に代用するだけではだめだったよ、ということが言いたかったのです。 <div>をまともに使ってあげれば、仰るとおり、問題ないと思います。 sezu | URL | 2008/08/25/Mon 20:55 [EDIT]
Re :（お礼）文字サイズを全ての機種で1段階下げる方法？ 確かめたところ、「font-size:x-small;」だと、au A5515K→小サイズ、au W52P→標準サイズ、SoftBank 821SH では極小サイズになってしまいました。大したことではなさそうで、奥の深い問題ですね。
ほげお | URL | 2008/08/20/Wed 18:36 [EDIT]
Re : 文字サイズを全ての機種で1段階下げる方法？ コメントありがとうございます。
「font-size:x-small;」という指定方法はPCサイトを作成する感覚であれば一段階下がると思いがちですが、携帯サイトではむしろそのほうがまれであり、この記述方法だと、ドコモでは多くの機種で文字が一段階小さくなりますが、auやソフトバンク携帯では、文字サイズが変わらなかったり、2段階小さくなってしまったりと挙動が定まっていません。 shiba | URL | 2008/08/20/Wed 16:49 [EDIT]
文字サイズを全ての機種で1段階下げる方法？ <div style="font-size:x-small;"> は最初から除外されているようですが、この記述の問題点を教えてもらえるとうれしいです。
ほげお | URL | 2008/08/20/Wed 16:38 [EDIT]
Re : DoCoMo F904iではダメですか？ shibaです。
iモードXHTML1.1以上に対応している端末であれば、 Tips3やTips6は表示できるはずです。端末ごとのXHTMLの対応バージョン については、以下を参照してください。かなり多くの端末で対応しています。 ■iモードXHTML1.1仕様 http://www.nttdocomo.co.jp/service/ imode/make/content/xhtml/about/index.html#p02 ■端末スペック表 http://www.nttdocomo.co.jp/binary/ pdf/service/imode/make/content/spec/imode_spec.pdf 原因はおそらく、作られたページが正しくXHTMLとして端末が認識していないのでしょう。 iモードHTMLとiモードXHTMLを正しく切り替える方法 （http://dspt.blog59.fc2.com/blog-entry-36.html） を参考に端末側にXHTMLであることを認識させてあげてください。 shiba | URL | 2008/08/01/Fri 22:53 [EDIT]
DoCoMo F904iではダメですか？ 突然のコメントで失礼いたします。
検索エンジンで携帯作成の手引きを探していてたどり着きました。 すっごく可愛くて、タメになるサイトを見つけて、嬉しくて小躍りしていたのですが、実際に、tips3と6をやってみると、私のケータイDoCoMo F904iでは表示できませんでした。 これは、もっと新しい機種対応のタグなのですか？ 0327 | URL | 2008/08/01/Fri 22:37 [EDIT]
ただの感想ですが； 携帯用サイトをいままさに作ろうと思ってる初心者です。
HP作成サービスと違って１から作るのって機種依存とかの面で大変そうだと思ってたんですが、ココを見てから色々理解することができました＆気が楽になりました（笑）かなり参考になります！ 更新がんばってください！(m・ω・)m | URL | 2008/08/01/Fri 05:26 [EDIT]
VGA端末でのサイト内画像 > VGA液晶端末すべて画像がおかしくなりますね。
> 点線画像とかも半分しか表示されませんし、何かうまく表示させる方法ないんでしょうかねぇ… phpやperl等で動的に生成している場合は以下対応が可能です。 ・SoftBankからのアクセス時はx-jphone-displayの値を取得し、幅480以上の場合は画像本来の縦横サイズをそれぞれ２倍にして書き出し ・480未満の場合は画像本来のサイズを書き出し 上記を織り込んでいるテンプレートエンジンがあると嬉しいですね。 静的に出力している場合はwidth="100%"にするしかないのではないでしょうか。 kb | URL | 2008/07/15/Tue 10:27 [EDIT]
VGA端末でのサイト内画像 1pxのスペーサの件、突っ込み入ってますね。
ke-tai.orgさんでその辺りは既出だと思っていたので、コメントしませんでした。 http://ke-tai.org/blog/2008/06/09/imagesav/ VGA端末でのサイト内画像については、 やはりプログラムなどで出し分けするのがベストな気がします。 パーセンテージでの画像の大きさは、その画像の読み込みが終わるまで、 サイトの下部が表示されない端末(ブラウザ依存)があり、 それだけのせいでユーザに「重い」とストレスを感じさせてしまう感があります。 imgのwidthとheightは確実に指定することで、たくさん画像を使ってもだいぶ「軽い」イメージのサイトになるかと思います。 全く関係ないのですが、背景に画像を指定できるって話は誰かしているでしょうか？ 意外に「ケータイじゃできないでしょ」って思われてるけれど、結構昔から普通にできる小技で、ページが潤います。 通常のCSSと同じ、background: url(hoge);です。XHTML/CSS非対応端末では無理ですね。 YAK | URL | 2008/07/15/Tue 02:23 [EDIT]
>ソフトバンクは高解像度のまま表示する他に合わせないKYな仕様をしている端末もあり、240ピクセルでは画像が小さく表示されてしまう端末もありました。
VGA液晶端末すべて画像がおかしくなりますね。 点線画像とかも半分しか表示されませんし、何かうまく表示させる方法ないんでしょうかねぇ… VGA端末はパーセンテージ指定すると一応なおりますが、そうするとw61shやw51tなどなど、機種依存なのか一部のAU端末で点線画像が表示されなくなったりと、私の知識ではお手上げです。 | URL | 2008/07/14/Mon 15:18 [EDIT]
Re : 区切り線の書き方 マージンも、幅1px、高さ任意のスペーサgifを使って実現しているようです。読み込み中に一瞬プレースホルダーが見えます。
cssでマージンが調整できないので（auはできますが）、3キャリア対応する場合はスペーサを使った方が自由度が高いみたいです。 web1.0の頃のようですね～ ktai | URL | 2008/07/09/Wed 18:20 [EDIT]
Re : 区切り線の書き方 コメントありがとうございます。
なるほど。そういうテクニックもありますね。 ただ、auでもhrにはマージンがとられます。auの実機で実際のモバゲーを閲覧した限りでは、モバゲーでも例えば新着ニュースの前後帯にはマージンがとられていたので、hrを使っているのではないかと判断しました。 ちなみに、実際のモバゲーでは、本来ならCSSで「border-top:1px dashed #ccc;」とできる点線を携帯ブラウザでも実現するために、同じような方法で点線を画像として挿入しているテクニックも見受けられます。 shiba | URL | 2008/07/08/Tue 12:29 [EDIT]
区切り線の書き方 区切り線をhrで書いていますが、こうするとDoCoMoだとマージンができてしまって不格好なので、モバゲー等では下記のようにスペーサを使用して作成していると思います。
<div style="background-color:#ff0000"> <img src="spacer.gif" width="1" height="1" /> </div> ktai | URL | 2008/07/08/Tue 12:21 [EDIT]
RE : 右左中央寄せ コメントありがとうございます。
確かにご指摘の通りですね。下位の機種まで含めると、 DIVタグに限らず、CSSだけでなく、align属性も指定しておいたほうがよさそうですね。 shiba | URL | 2008/07/08/Tue 10:47 [EDIT]
右左中央寄せ style="text-align:center"の他に、
align="center"も指定しておいた方がよいです。 記憶があやふやですが、auかSBの下位機種で寄せが効かないです。 YAK | URL | 2008/07/08/Tue 09:47 [EDIT]
|
| ホーム |
