PR

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

2008年10月21日(火)
柴崎 正也

互換性をもった配置法とページ内リンク

 できるだけ旧機種まで考慮したページにするならば、古い指定方法も併記したほうが良いでしょう。

 例えば、div要素内をセンタリングする際には、XHTMLではtext-alignプロパティを用いるのが一般的ですが、古い機種までサポートするのであれば、下記のようにalign属性を併記します。



 このように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)
PCおよび携帯サイト制作のほか、デコメ、SEO、LPOなどWEBサイト全般の業務に携わる。過去にイントラネットのデザイン改修、コーポレートサイトの企画および制作、タイアップバナー広告の作成、Movable TypeなどのCMSテンプレートカスタマイズ、PHPプログラミング等を経験。3年ほど前から携帯サイト制作にシフト。著書に「携帯サイト コーディング&デザイン」。そのほか、HTML/CSSリファレンスサイト、携帯サイト制作支援ブログなどを運営。HTMLタグボード:http://www.dspt.net/携帯ホームページを作ろう!:http://dspt.blog59.fc2.com/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています