3キャリア対応の携帯サイトを作るには

　このようにCSSと同様のことがHTMLタグの属性で実現できるのであれば、それも記述しておくと良いでしょう。

　携帯サイトは画面が小さいので、どうしても縦に長いサイトになってしまいます。これに対応するため、PCサイト同様に画面のトップへ戻る、ページ内リンクを適宜挿入することで、使いやすさを向上させることができます。ただし、そのページ内リンクについても注意点があります。

　タグの属性には「name」がありますが、ドコモ（XHTML）ではname属性に対応していません。PCサイトではid名へのリンクによってページ内遷移をする方法が推奨されていますが、これと同じような方法を携帯サイトでも取り入れておきましょう。方法としては、id名とname属性の値を同じにしておきます。

ターゲット：…
リンク元：…

　また、auではdivなどのブロックレベル要素間で1pxほどのすき間が生じてしまうというバグがあります。

　例えば、図3のようにサンプルサイトの「今週のオススメ」の部分で、背景がついた見出し部のdiv要素とspacer.gifを含むけい線のdiv要素の間に1pxほどのすき間があることを確認できるはずです。

　これはmarginプロパティなどによっても解決できないものなので、div要素を連続させたり、画像を縦に連続させて表示するといったことができません。これについては解決方法がありませんので、このバグについては、デザインする際に頭に入れておいてください。

CSSハック

　3キャリア対応のサイトを制作していると、どうしてもキャリア間の違いを吸収できない場合があります。この解決方法の1つとして、外部CSSの読み込み有無の違いを利用したハック方法があります。外部CSSはauとソフトバンクで対応していますが、ドコモでは外部CSSに対応していません。

　ドコモとau／ソフトバンクの違いということであれば、外部CSSにau／ソフトバンク用のCSSを書いておいて、ドコモにはインライン指定のCSSを優先させるといった手順をふむことで、違いを吸収するということが可能です。

　例えば、以下のように紺色の背景色を指定しているdiv要素の背景を、ドコモとau／ソフトバンクで異なる色に変えるといったこと可能です。

　HTMLの表記は下記になります。

　外部CSSの表記は下記になります。

.line {background:orange;}

　上記の表記で、ドコモでは紺色の背景、auとソフトバンクはオレンジ色の背景となります。

　注意しなければならないのは、いかなる場合でもCSSはstyle属性が優先されるということです。ですから、これを外部CSSで上書きするには、上記のようにstyle属性とclass属性の書く順序に気をつけてください。

　なおこれ以外にも、auとソフトバンクで効くCSSと効かないCSSがありますので、このあたりを知っていれば、auとソフトバンクに対するハックも可能です。

　次回は、ケータイサイトならではのユーザビリティについて、使いやすさや見た目の向上をはかるためのTipsを解説します。

　なお、本稿の執筆にあたって、以下を参考にしました。

「スペーサーGIFの使用：HTMLタグボード（http://www.dspt.net/seo/001/009.html）」（アクセス：2008/10）

「作ろうiモードコンテンツ：NTT docomo（http://www.nttdocomo.co.jp/service/imode/make/）」（アクセス：2008/10）