携帯サイトはfont size=-2ということについて長々と。

あまり触れられることの少ないことなのですが、
携帯のコーディングをされている方の多くは、
基本的にすべてのfont sizeを-2に指定していることが多いです。
(px等で指定する場合を除く。)


では、なぜ-2にするのか。

まずそもそもフォントサイズを小さくしようとするのかというと、
一行あたりの文字数を増やつつ、文字列の高さも低くしたいためです。

私の携帯基準(ドコモ N906i)で話すと、
標準サイズの場合、一行あたりの文字数は12文字です。

そして-2にした場合、一行あたりの文字数は15文字になります。

数字にすると大して変わらないじゃないか、と思われがちですが、
実際にコーディングをしていると、この3文字の大事さを知ることになります。

メニュー⇒着うた/占い/デコメ

と一行に収まるのか、

メニュー⇒着うた/占い/デ
コメ

と二行に渡ってしまうのか、ということで。

どう文言を削っても、一行に収まらないケースが出てくるのです。

それは非常に見栄えが良くない。

モバゲー・GREEなんていう大手さんのサイトを見ればわかるとおり、
変なところで改行していることは「絶対」にありません。

それだけ携帯サイトというのは、
一行に収めてスマートに見せることを徹底しているのです。


で、スマートにするというところに繋がるのですが、
サイズを小さくすることにより、文字の高さが低くなるのも実は大事なポイントです。

携帯サイトは当然ながら開いた瞬間、サイトの上部しか見えないです。

ということはつまり、その僅かな高さの中で
サイトのコンセプトというものを明示しなければなりません。


ユーザーはサイトを開いた瞬間の印象で、
下キーを押していくかを決める、ということ。

その大事な空間を効率的に使うためにも、
文字のサイトを小さくし、高さを低くするということも大切です。


↑
ここまでがそもそもの概要。

で、さらに細かい部分に触れます。


実は一部のコーダーはここで、font size=2を指定していることもあります。
・・これはキャリアの罠です。笑

font size="-2"
に指定した場合、auもドコモも等しく文字のサイズが小さくなります。

font size="2"
に指定した場合、ドコモは希望どおり小さくなりますが、auはほとんど小さくなりません。

という罠。

自分の携帯がドコモというコーダーさんが陥る罠。

まとめると-2にしておけば最近出てる多くの携帯で、
希望した文字サイズ(モバゲーみたいになる文字サイズ)にできるいうことです。



最後に細かいテクニック。


＜font size="-2"＞

〜〜〜〜

＜/font＞


ってすると楽ということ。

全携帯とはいえないですが、
多くの携帯はこれで文字サイズを一括して小さくできる(と思っています。)

注意点としては、table内の文字サイズなんかはコレだと変わりません。
該当箇所だけさらに個別にサイズ指定をしてあげる必要があります。


この点について、書籍で厳密に触れられていないのは、
実際のところ特定機種ではまったく違う表示がされてしまう、
なんてことが可能性としてあるからだと思います。

なのであくまで、「大体の携帯」に対応するテクニックとして、
捕らえてもらえればと思います。

大手さんなんか、キャリアごと＆世代ごとに、
厳密なサイズ指定を行っていますので。



・・というかんじで、font size="-2"について全力で語ってみた。


よろしければ、こちらの記事もご覧ください。

■手っ取り早く携帯サイトを作成する時のhtmlテンプレート
http://d.hatena.ne.jp/moba13/20100916