ウェブランサー

【3キャリア共通】携帯サイトの見出しを作る方法

携帯サイトで見栄えの良い見出しを作ろうとしても、3キャリア間で上手く表示されない機種が見つかったり、画像を使わなければならないことがあります。

携帯サイトを作る時の原則として、「軽く作る」「シンプルに作る」というものがあります。より多くの端末に対応するために必要なことなので、表示が崩れたり、エラーを出すリスクを減らすためには実践する必要があります。

見出しをなるべく軽くシンプルに作るためには、画像を使わずに基本的なタグで構成する必要があります。CSSを要素に直接書き足していくので一見複雑に見えますが、一つ一つは単純です。以下にいくつかサンプルをご紹介します。

携帯サイトの見出しサンプル

表示確認
見出しテキスト001

見出しテキスト002

 見出しテキスト003

 
見出しテキスト004

 
見出しテキスト005

見出しセンタリング
XHTML
<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;">&nbsp;</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;">
&nbsp;</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;">
&nbsp;</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で作る方法
携帯サイトのフォントサイズ指定 携帯サイトで文字の大きさを決める際のコツを紹介
携帯サイトの見出し 画像を使わなくてもできる携帯サイトの見出しサンプル
文字入力モードの指定 文字入力が必要なフォームを設置する際の初期値を制御する方法
SNSをフォロー
コンテンツ
LINK