[携帯]フォントサイズ(XHTML版)
フォントサイズ(HTML版)に引き続き、今回はXHTML版です。
CSSでフォントサイズを指定するので、こんな感じになります。
<span style="font-size:x-small;">文字文字</span>
各指定方法で、実際どのぐらいの大きさで表示されるのかをチェックしやすくするため、サンプルページをつくりました。
サンプルページを色々な端末で見てみると、だいたいどのサイズがいいかーというのが見えてくるかと思います。
サンプルページ
QRコード
→サンプルページを見る
太字の指定方法はbとstrongとfont-weight:bold;です。
各キャリア、端末の表示
docomo
【大】xx-large,x-large
【中】large,medium
【小】small,x-small,xx-small
※全端末共通(iモードブラウザ1.0/2.0や端末間での差異なし)
太字はiモードブラウザ1.0は一切効きません。
2.0だとb、strong、font-weight:bold;全て効きます。
N-02Bで確認していただいたところ、太字が一切効いていないとのご連絡をいただきました。2.0なら絶対太字が効く、というわけではないようです。
au
W63K
【大】xx-large,x-large
【中】large
【中】medium
【小】small,x-small
【極小】xx-small
5段階の大きさで表示されます。
太字は一切効いてません。
A5514SA
【大】xx-large,x-large
【中】large,medium,small
【小】x-small,xx-small
3段階の大きさで表示されます。
端末が今手元にないため、太字が効いているかは不明。
softbank
930P
【大】xx-large
【大】x-large
【中】large
【中】medium
【小】small
【小】x-small
【極小】xx-small
7段階の大きさで表示されます。
太字は一切効いてません。
各キャリアのキャプチャ画像
色々な端末で見るの面倒!という人用。
写真をずらーっと並べてみます。
※各端末の文字サイズの設定は「中」にしています。
docomo
SO903i(iモードブラウザ1.0)
F-01A(iモードブラウザ1.0)
F-01B(iモードブラウザ2.0)
au
W63K
W63K
softbank
930P
まとめ
※以下、3キャリア1ソースの場合を想定して書きます。
「携帯サイト[xhtml]のコーディング前のチェックポイント」のエントリーでも触れてますが、個人的には文字の大きさは2段階までと考えていて、3キャリア大体の端末でちゃんと文字の大きさを大小と表示させるためにはx-smallとmediumが一番無難と思っています。
3段階(大、中、小)にしない理由は、docomoがそもそも3段階でしか表示ができず、「大」は本当に大きくて見栄え的に私はNGだと思うので避けたい、というところです。もちろんそのサイトの性質にもよるので、ターゲットユーザーによって大を使う場合もあるかもしれませんが。
x-smallとmediumを使う理由は、3キャリアほぼほぼ共通して「大」「小」の2段階の大きさに表示できるのがx-smallとmediumだったっていうだけです。auとsoftbankに関しては、端末によって異なってくるのでx-smallとmediumだときちんと文字の大きさが2段階にならない場合もあります。じゃあxx-smallにすればいいかっていうと、softbankで結構文字が小さくなります。
3キャリア1ソースだと、どこに妥協点をもっていくかによって指定方法が変わってきます。
その案件にかかわっている人達とどうするか相談して決めるのがベスト、ですかね。
はじめまして。
>2.0だとb、strong、font-weight:bold;全て効きます。
N-02Bで確認しましたが、太字指定が全て効いていませんでした。iモード2.0対応機種でも、端末により効かないのがあるのでしょうか?
はじめまして。
このエントリーのサンプルページの太字部分が効いてなかった、ということでしょうか。
xhtmlではなくhtmlだとiモードブラウザ2.0でも太字が効かないのですが…htmlファイルだったということはないでしょうか。
N-02Bが手元にないのでなんともあやふやな回答ですみません。
お返事ありがとうございます。
>このエントリーのサンプルページの太字部分が効いてなかった、ということでしょうか。
はい。このエントリーのサンプルでも駄目でした。
N02Bだと、xhtmlモードでも太字は効きませんでした。
端末のディスプレイ設定で、フォントの太さを「細字・太字」のどちらでも効きませんでした。
iモード2.0の仕様でも端末によるのかなと思ってしまいますね。
おお…貴重な情報ありがとうございます。
docomoは端末毎の差異はあまりないと思い込んでいました。
記事に修正いれさせていただきますーありがとうございました!
はじめまして。
携帯サイトのフォントサイズを調べていて辿り着きました。
エントリを参考にさせて頂きましたので、実機で調べたメモを残しておきます。(h1~h6はサンプルページに独自に加えたものです)
DoCoMo P704iμ 3段階
【大】h1,h2,h3,xx-large,x-large,large
【中】h4,medium
【小】h5,h6,small,x-small,xx-small
au Xmini 4段階
【大】h1,h2,xx-large,x-large
【中】h3,h4,h5,large,medium,small
【小】x-small
【極小】h6,xx-small
携帯サイトではh1~h6は余り使われないのでしょうか?
情報ありがとうございます!大変助かります。
>携帯サイトではh1~h6は余り使われないのでしょうか?
案件次第、というところです。
私の場合は基本使わないですが 、使った方がいい案件の時だけ使う感じです。