ホームページ制作ブログ

Web年賀状制作復習メモ第一弾。
「とりあえず携帯サイト作るのにコノ辺は知っとこう」的なネタです。

知識0から今すぐ携帯サイトを完成させなきゃいけないWeb屋さん（先月のウチだ）に読んで頂けると、（先月のウチから削られた）睡眠時間をプレゼントできるかと思います。

最近の携帯Webブラウザは頭良くてCSSも割かし分かってくれます。
けどちょっと凝ったデザインをやろうとするととたんにツンツンしだします。
でれツンで非常に萎える事この上ない…。

主観でかしこさを羅列するとこんな感じ。
au > softbank >>> 越えられない壁 >>> docomo

ちなみにウチの知識レベルはこんな感じ。

で、制作時に困った事ランキングは以下の通り。

1. コーディング・CSS
2. 絵文字
3. pngとgif
4. 1ページあたりの容量

ググれば解説はいっぱいあるけど小難しくて「結局の所、結論は！？結論だけ教えて！！」と頭がスポンジになりました。
ので、能書き抜きで出来る限りバッサリきっぱりクッキリ要点のみまとめます。

コーディング・CSS

1. 言語はXHTML
2. ドキュメントタイプはXHTML 1.0 Transitional
3. docomoにはHTTPヘッダでContent-Type: application/xhtml+xmlを吐く
4. コンテンツの横幅は240px目安
5. 一行の文字量はfont-size:middle;の場合横に9文字程度
6. 画面サイズより大きい画像は画面サイズちょっきりに縮小表示される
7. CSSはタグにstyle要素で直書き
8. 背景色は<div>にしかつけられない
9. <p>は上下にスペースが空きすぎて使いづらい
10. ページ内リンクは<a name=”hoge”>にしか飛べない（idには飛べない）
11. リンクの部分的な色かえはちょっと面倒

絵文字

1. PHP絵文字変換スクリプトを使う
2. i絵文字を使う（auはdocomoの絵文字を自動で変換する）

3キャリア共通を意識するならPHP絵文字変換スクリプト
softbankの時だけ絵文字がアホになっても良ければ
もしくはsoftbankの時だけ絵文字がアホになるのを直すテクがある人はi絵文字がオススメ。

pngとgif

• docomo・Lモード・古いsoftbank→gif
• それ以外→png

上記の様に画像の拡張子を切り替える。出来ない・めんどくさい場合は全部jpegにする。

1ページあたりの容量

• 文書→10kb前後
• 画像→30kb前後

とりあえず身も蓋もないけどこんだけ知ってればサクッとこなせる筈。
あくまでウチ流なので間違い訂正・突っ込み大歓迎です。

そのうち各々の解説エントリーが出来る筈。なんでその結論が出たのか知りたいって人は読んでみて下さい。
「これを先に知りたいなぁ〜」ってリクエストあればコメントでどうぞ。優先的にエントリーします。