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

制限の多いキャリアに合わせた作り

　前回（http://www.thinkit.co.jp/article/143/2/）は、汎用的な携帯サイトを作る手順とポイントを解説しました。今回は、3キャリア対応の携帯サイトを作るテクニックと「こうしたい」を実現するデザインテクニックを技術的視点で解説します。

　3キャリアに対応した携帯サイトを作るためには、各キャリアの仕様を比較し、最も制限の多い（自由度の低い）キャリアに合わせなくてはなりません。まず、第1回（http://www.thinkit.co.jp/article/143/1/）と第2回（http://www.thinkit.co.jp/article/143/2/）の内容をふまえて、3キャリアの携帯サイト制作のポイントをおさらいしましょう。

　HTML／CSSに関しては、最新のデザインを取り入れるならHTML文書は「XHTML」で記述する、コンテンツのMIMEタイプは「application/xhtml+xml」（HTTPヘッダーも）、文字コードは旧機種を考慮して「Shift-JIS」、外部CSSは使用せずに、styleタグによるリンク設定とstyle属性による「インライン指定」にとどめることが、ポイントとなります。

　画像に関しては、サイズは「横幅最大240px」、フォーマットは「JPEGかPNG画像」、できるだけ使用する色数を減らす、画像などを含めたページ全体の容量は「100KB以内」とするのがポイントです。

　そのほかに関しては、文字サイズは1行につき「標準で全角10文字」程度、「小で13文字」程度。絵文字はauとドコモに互換性があり、全キャリア対応はプログラムが必要。タグを記述する際に「インデントを使わない」コーディングをすることがポイントとなります。

　もちろんこの条件では、2G端末などの旧機種を考慮していないので、全機種に対応させてページを作ることはできません。どこで一線を引くかは前回（http://www.thinkit.co.jp/article/143/2/）でも紹介しましたが、それはサイトの規模や制作者の判断に委ねられます。

色つきけい線、hrタグ

　それでは、前回（http://www.thinkit.co.jp/article/143/2/）のサンプルサイトをもう少し発展させたサイトを例に、それぞれポイントとなるデザインテクニックを紹介していきます（図1-1）。サンプルはこちらからダウンロード（http://www.thinkit.co.jp/images/article/143/3/14331.zip）できます（14331.zip/7.79 KB）。

　まず、携帯サイトでカテゴライズによく使われるけい線（

---

タグ）は、キャリアによって指定方法が異なる、クセの多いタグです。

　それでは、キャリア別にhrタグのポイントを紹介します。

　ドコモでのhrタグのポイントは、XHTMLではすべての属性に非対応となります。

　ソフトバンクでのhrタグのポイントは、下記になります。

・けい線の上下にマージンがとられる
・hrの余白調整はmargin／paddingプロパティで対応可能
・陰をなくすnoshadeに対応

　auでのhrタグのポイントは、下記になります。

・ライン色はcolorプロパティで対応
・au以外のキャリアのライン色はbackgroundプロパティで対応
・heightプロパティは非対応（size属性で縦方向の長さを指定）
・borderプロパティは非対応（au以外はけい線の境界線を指定可）
・text-alignプロパティはauのみ対応（au以外はalign属性を使用）

　また、widthプロパティは全キャリアで使用可能となります。

　このように、初期状態のhrタグの長さを変えたり、色を変えたりするには、キャリアによって指定方法が異なるので、これらすべてを同じようなデザインにするには、下記のように多少長くなってもすべてを考慮した指定方法にする必要があります（図1-2）。

---