３キャリア対応のテンプレートの話

キャリア別とか2G用にテンプレートを複数作って対応というのは個人で出来るレベルじゃないので、モバイル向けは１ページごとに１枚のテンプレート追加で作る。
なるべくPC向けのテンプレートを大幅に修正しなければいけないようなものは避ける。

(中略)

最後にもう一度まとめ
・文字コードはUTF-8。
・マークアップ言語はXHTML Basic。
・画像はJPEGかGIF。
・CSSはインラインで書く。
・ページサイズはXHTML9KB以内、画像含めてで100KB以内。
で、最近の端末はだいたいカバーできるはず。

ページが見つかりませんでした | 15Pub

ってことで、割とよくまとまっている感じ。

ただ、実際にこのやり方で組んだことはないんじゃないかなーって言う印象。いや、やったことあったらごめんなさい。
何でそう思うかって言うとインラインCSSのハマりっぷりについて何も触れてない。
３キャリアで１テンプレートを実現しようとすると、DoCoMoのi-CSSのはまりっぷりったらない。
特にstyle="font-size:hogehoge"あたりが半端ない。
CSSと名前が付くけど、全然別物の劣化コピーなので無理に３キャリア対応しようとすると逆にハマる。
っていうか、考えていたデザインは実現できない。絶対３キャリアのデザインが統一されない。

例えば上のstyle="font-size:hogehoge"なんだけど
auとsoftbankは、hogehogeは数値指定。
だけど、DoCoMoはlargeとかsmallとかxx-largeとか書いたりする。文字列。数値ダメ。
同じ指定名称なのに、取る値が違う。これは泣ける。
しかもこれで指定すると、auとsoftbankは何か変な値と解釈するようで、フォントサイズがおかしくなったりする。au羽虫っぽいけどsoftbankは解釈したはず。
もちろん、auとsoftbankの間でも同じ数値の意味する所が違うとか、やるせない違いはあるんだけど、まだ思った方向性に進むだけマシ。DoCoMoマジしｎ（ry

じゃあauとsoftbankはheadのCSSで！とか言おうと思ってもそこはインラインが強い。font-size指定上書きされちゃってあちゃぽー。
そういうとこキッチリしなくていいからお二人さん。

じゃあどうするかというと、これを回避するためには、変なバッドノウハウを使う必要がある。

実は、DoCoMoのFoma端末は「XHTMLに対応」しているわけじゃなくて、HTML(DoCoMo独自)モードとXHTML(DoCoMo独自)モードという２種類の解釈方法を別々に持ってる。内部エンジンが実は同じみたいな話も聞いたような聞いてないようなそこはシラネ。

どういうことかと言うと、HTMLモードのときはXHTMLのタグは使えなくて、XHTMLモードのときはHTMLタグは使えない、ということ。
fontの例で言えば、
HTMLモードのときは<font>タグは解釈するけど<span>タグは解釈せず、
XHTMLモードのときは<span>タグは解釈するけど<font>タグは解釈しない。

他にも当然HTMLモードのときは<div>解釈しないとか色々。
ﾋﾞｯｸﾘだ。。。

でも、これが合ってよかった、とおもう瞬間もある。それが↑の問題に突き当たったとき。
幸いにも、auとsoftbankはHTMLかXHTMLかに関わらず、<span>だけじゃなく<font>も効く。XHTMLだろうが効く。
なので、３キャリア対応で文字サイズを変える場合には、こうすることになる。

<span style="font-size:small"><font size="1">ほげほげ</font></span>

あほかー。
しかも、fontタグでサイズを変更すると、ソフトバンクの変わり具合がヤバい。
正直言ってむちゃくちゃで、ハナクソより小さな文字から１増やすと見出しかお前は！位でかくなる。

まぁまぁ総括すると、素人だろうがなんだろうが、何が何でも３キャリアテンプレート別にしたほうが圧倒的に作業量は減りますし、そもそも１テンプレートにすると表現したかった結果にはたどり着けない場合が出てきますよ、と。

※なんとなく、まとめを見て一応言っとくかって気分になっただけなので走り書き。ごめんね文章書くつもりで書いてないから読んだ方多分すごく読みにかったろうね（；；