携帯サイト（ケータイサイト）の作り方Part2

1年以上前の記事です。内容が古い可能性があります。

携帯サイト作成に関するすばらしい記事を見つけました。

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

Tips 1. XHTMLで作成する。
Tips 2. キャリアごとの仕様の差は外部CSSで。
Tips 3. 文字サイズを小さくするには
Tips 4. ロゴ画像のサイズは横240ピクセル
Tips 5. 流れる文字はDIVタグで
Tips 6. 反転文字
Tips 7. 色つき水平線
Tips 8. 右寄せ
Tips 9. 画像の回り込み
Tips 10. 携帯サイトは文字でデザインする！
Tips 11. フッターは最後に。そして質素に。
Tips 12. 絵文字のちょっとしたテクニック

Tips 1. XHTMLで作成する。

に関しては僕も過去に記事にしています。
□携帯サイト（モバイルサイト）でCSS
ドコモでCSSを使うためにはXHTML（拡張子xhtml）にしてタグ内でCSSを書くという内容です。
これは、docomoが外部CSSに対応していないからです。
で、それを利用したのが

Tips 2. キャリアごとの仕様の差は外部CSSで。

です。

外部CSSを読めるブラウザ（au・ソフトバンク）と読めないブラウザ（ドコモ）
の仕様の差を埋めるために、あえて外部CSSを読み込ませ、こちらにau、ソフトバンク向けのスタイルを記述する

といった内容になっています。
Tips 3～Tips 5に関しても僕の過去の記事に同じような内容が書かれています。
□携帯サイト（ケータイサイト）の作り方

Tips 3. 文字サイズを小さくするには

○文字の大きさを変える
　font-size:small
携帯サイトでは文字サイズは3段階までのようです。
smallで一段階小さくするかlargeで一段階大きくするかになります。

Tips 4. ロゴ画像のサイズは横240ピクセル

画像は横幅最大240px。回り込みを設定するときは80px程度が最適。

Tips 5. 流れる文字はDIVタグで

○マーキー（文字が画面を横切る加工）
　display:-wap-marquee

と言った具合。

Tips 6. 反転文字

も

○文字に色をつける
　color:#FFFFFF
僕は背景に色を敷いて文字を白抜きにするときに良く使ってます。
もちろんどんな色でも設定できますのでそのあたりはご自由に。
○文字の背景に色を敷く
　background-color:#000000
タイトルやキャッチコピーに使うといいと思います。

こちらの組み合わせで作れるし、前の記事で

<div style=”background-color:#000;color:#fff;font-size:xx-small”>こんにちは</div>

といった例も上げています。

Tips 7. 色つき水平線

も同様に前の記事で

たとえば罫線はこんな感じで。

<hr style=”border-style:solid;border-color:#FFA900;height:0″ />

と、書いています。
うーむ。偶然って怖い。

続けましょう。

Tips 8. 右寄せ

に関しては

○文字を中ぞろえ（センターぞろえ）にする
　text-align:center
バックグラウンドに色を入れて白抜き、センターぞろえで見出しの出来上がり。
もちろん右揃え等もできます。

これの応用ですね。

Tips 9. 画像の回り込み

も

<img>タグにfloat:leftを使ったり

と、ちょこっと触れてます。
ただ、ここでは

通常回り込みを行う場合は、DIVタグなどにfloatプロパティを用いて実現しますが、auなどではfloatプロパティに対応していないので、上記のようにドコモ用にインラインCSSでIMGタグにfloatプロパティで回り込みさせ、一方au向けにはIMGタグのalign属性で同様に指定します。

といった情報が加えられています。
やっぱり偶然
それが証拠にTips 10～Tips 12には僕も参考になる記事が書かれています。

Tips 10. 携帯サイトは文字でデザインする！

つまりは半角やスペースをうまく使ってデザインしようと言うこと。
文字だけのメールマガジンなんかでもやっている手法ですね

Tips 11. フッターは最後に。そして質素に。

携帯サイトなんでフッタは最低限にしようということ。
個人的にはマルシーとそこにリンクを入れるだけでいいと思います。

Tips 12. 絵文字のちょっとしたテクニック

AUの絵文字は画像扱いなので文字を小さくする方法では小さくならないとのこと。

これを回避するためには、あえてドコモの絵文字を記述し、auのサーバー側で絵文字をau向けに自動変換させる

と良いとのことです。
これに対応した携帯絵文字変換スクリプトの改良版ってのがあるそうなのでそちらへのリンクもはっておきます。
□携帯絵文字変換スクリプト 3キャリア対応版 – HTMLタグボード

以上、12の携帯サイト作成に関するTipsの紹介記事でした。
最後にひとつだけどうしても気になることがありまして。。
僕が記事を書いたのが7月5日で、あちらの記事が7月7日なんですよねぇ。
これも偶然なのだろうか。ううむ。。