これからゆっくり考L +α

[携帯]フォントサイズ（XHTML版）

CSSでフォントサイズを指定するので、こんな感じになります。

<span style="font-size:x-small;">文字文字</span>

各指定方法で、実際どのぐらいの大きさで表示されるのかをチェックしやすくするため、サンプルページをつくりました。

サンプルページを色々な端末で見てみると、だいたいどのサイズがいいかーというのが見えてくるかと思います。

前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。

コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。

デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。

前置きはこのぐらいにして、早速本題へ。

以下が今回のサンプルデザインです。

初期提出デザイン

「これをxhtml、3キャリ1ソースコーディングしてください」
と言われた場合で考えていきます。

前提条件は、
・3キャリア1ソース
・xhtml
・文字コード：Shift-JIS
・改行コード：CR LF
・QVGA対応（VGA対応は特にしない）

対応端末は、
・docomo 902以降（table未対応機種を除外）
・au WIN端末
・softbank 3G
です。

3キャリア1ソースで作成するときは、「背景画像は1つまで！」ルールでやっているのですが、各キャリアの対応状況ってどんなんだろーと思いちょっと確認してみました。

1キャリアのみ対応の案件もたまにあるので、柔軟に対応できますように。

結論から言ってしまうと、「bodyとcss、どちらで指定しても見え方は一緒」です。

<body link="#5994FF" vlink="#59E2FF">

<style type="text/css">
<![CDATA[
a:link{color:#5994FF;}
a:focus{color:;}
a:visited{color:#59E2FF;}
]]>
</style>

bodyに指定してもCSSに指定してもどっちも変わらないなら別にどっちでもーじゃん？
って思うんですが、CSSを使って一工夫するとちょっとだけよくなる！っていうのをご紹介します。

携帯サイトに限ったことではないですが、フォームページの作成って結構骨が折れるというか心が折れるというか眠くなるというか。
そんなフォームページを簡単にやっつけるべく、コピペでペタペタはっていけるようにまとめてみました。

フォームサンプル画面
こんなフォームページがちょちょいのちょいと。

Dreamweaverなどを使っている場合はスニペットに登録しておくとかなり作業効率がアップしますよ？
ただ、Dreamweaverを使わずに秀丸とかでコーディングする時もあるので、そういう時の自分の為に。