携帯サイトのフォントサイズ指定
携帯サイトでフォントサイズを変える場合、端末によって変化の度合いが異なります。同じソースでも画面で表示した時に見た目の印象が変わるので注意が必要です。
文字の大きさは、メインターゲットとなるユーザーの属性に合わせた方が良いでしょう。ターゲットとなるユーザーが比較的若く、携帯を使いこなしている層なら、文字は小さめにして画面にできるだけ多くの情報が入るように工夫します。逆に携帯サイトを使い慣れていない初心者や、年配の方がターゲットの場合には、文字の大きさを変えずに初期値のままにしておいた方が良いでしょう。
フォントサイズの変化するパターン
フォントサイズを指定したときに、キャリアや機種ごとに変化する度合いが異なる場合があります。現在3段階、5段階、7段階の3パターンが存在します。
3段階表示の機種
- 大：xx-large, x-large
- 中：large, medium
- 小：small, x-small, xx-small
5段階表示の機種
- 大：xx-large, x-large
- 中：large
- 中：medium
- 小：small, x-small
- 極小：xx-small
7段階表示の機種
- 大：xx-large
- 大：x-large
- 中：large
- 中：medium
- 小：small
- 小：x-small
- 極小：xx-small
最も無難なフォントサイズ指定はどれか
現状、最も利用者が多いdocomo端末が全て3段階表示となっています。[xx-small]を使ってしまうと、7段階表示の機種では極端に小さな文字になってしまうので、特に理由がなければ使う必要はないでしょう。
大手サイトでは、ページ全体に[font-size:x-small;]を指定して、フォントサイズを1段階下げるものが主流です。目立たせたい文字に対して[font-size:medium;]を指定して、大きな文字として見せます。
XHTML
<div style="font-size:x-small;">
<div>内容を記述</div>
<div style="font-size:medium;">文字を大きくしたい場合</div>
<div>内容を記述</div>
</div>
迷った時は、自分の普段使っているサイトの真似をしてしまうのも一つの手です。
携帯サイトリファレンス
| 携帯サイトの基礎知識 | 携帯サイトを作る時に押さえておくべきポイント |
| 携帯サイトの基本的な作り方 | 携帯サイトで使えるタグは限られているので有効に使いましょう |
| HTMLをXHTML化する | 携帯サイトをHTMLからXHTML化する時に役立つ知識 |
| 3キャリア対応のXHTML携帯サイト | 携帯3キャリア対応の共通ページをXHTMLで作る方法 |
| 携帯サイトのフォントサイズ指定 | 携帯サイトで文字の大きさを決める際のコツを紹介 |
| 携帯サイトの見出し | 画像を使わなくてもできる携帯サイトの見出しサンプル |
| 文字入力モードの指定 | 文字入力が必要なフォームを設置する際の初期値を制御する方法 |