携帯サイトで見栄えの良い見出しを作ろうとしても、3キャリア間で上手く表示されない機種が見つかったり、画像を使わなければならないことがあります。
携帯サイトを作る時の原則として、「軽く作る」「シンプルに作る」というものがあります。より多くの端末に対応するために必要なことなので、表示が崩れたり、エラーを出すリスクを減らすためには実践する必要があります。
見出しをなるべく軽くシンプルに作るためには、画像を使わずに基本的なタグで構成する必要があります。CSSを要素に直接書き足していくので一見複雑に見えますが、ひとつひとつは単純です。以下にいくつかサンプルをご紹介します。
携帯サイトの見出しサンプル
<div>
<span style="color:#FF0000;">■</span>見出しテキスト001
</div>
<div style="color:#FFFFFF; background:#0099FF;">
<span style="color:#0000AA;">■</span>見出しテキスト002
</div>
<div style="color:#333333; background:#FFCC66;">
<span style="color:#FF3300; background:#FF3300;"> </span>見出しテキスト003
</div>
<table align="center" width="100%" style="text-align:center; width:100%;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="5" height="5" style="text-align:center; width:5px; height:5px; background-color:#0000FF;"> </td>
<td align="left" style="text-align:left;">
<div style="color:#333333; font-size:x-small;">見出しテキスト004</div>
</td>
</tr>
<tr>
<td height="1" style="height:1px; background-color:#0000FF;" colspan="2"></td>
</tr>
</table>
<table align="center" width="100%" style="text-align:center; width:100%; background-color:#FF0066;" cellpadding="0" cellspacing="1">
<tr>
<td align="center" width="5" height="5" style="text-align:center; width:5px; height:5px; background-color:#FF0066;"> </td>
<td align="left" style="text-align:left; background-color:#000000;">
<div style="color:#FFFFFF; font-size:x-small;">見出しテキスト005</div>
</td>
</tr>
</table>
<div style="text-align:center; color:#FFFFFF; background:#FF6600;">
見出しセンタリング
</div>
実は携帯サイトで表現できるパターンはそんなに多くありません。凝った表現をしようとすると、結局画像を作ることになってしまいます。自分なりに優先順位を決めて、状況に応じて使いまわせるパターンを作っておきましょう。
TDの[height="1"]が効かない機種もあるので、どうしてもTableレイアウトのボトムにラインを引きたい場合には、1x1pxの透過GIFを用意してTDの中に設置することで高さ1pxのTDを実現できます。
携帯サイトリファレンス
| 項目 | 概要 |
|---|---|
| 携帯サイトの基礎知識 | 携帯サイトを作る時に押さえておくべきポイント |
| 携帯サイトの基本的な作り方 | 携帯サイトで使えるタグは限られているので有効に使いましょう |
| HTMLをXHTML化する | 携帯サイトをHTMLからXHTML化する時に役立つ知識 |
| 3キャリア対応のXHTML携帯サイト | 携帯3キャリア対応の共通ページをXHTMLで作る方法 |
| 携帯サイトのフォントサイズ指定 | 携帯サイトで文字の大きさを決める際のコツを紹介 |
| 携帯サイトの見出し | 画像を使わなくてもできる携帯サイトの見出しサンプル |
| 文字入力モードの指定 | 文字入力が必要なフォームを設置する際の初期値を制御する方法 |