Softbank仕様を生かした携帯サイト作成。

さて、「携帯サイト制作って何が大変なの？」第二弾です。

こうなればとことん探求！！DoCoMoが日本の標準なわけではありません。Softbank、au、それぞれのキャリアに最適なサイトをつくり、それを別のキャリアでみて比較します。

まずはSoftbank。

外部CSSが使えるので、スタイルシートを追加しXHTMLのソースも作りなおしました。それをDoCoMo、auでみるとどう変わるのか？検証してみました。

目次

Softbankサイトをつくる。

Softbank仕様XHTMLの一般的な特徴をあげます。

  • 外部CSSが使える。
  • 使えるタグが多い。
  • 画像領域が大きい（機種によります）。

タグは以下のようにつけました。DoCoMo用に見た目重視でつくったものを直したのであまり綺麗ではありませんが、意味がわかるようにidをふりCSSでスタイルを適用させやすくしてみました。画像とテキストを左右に並べる箇所では同じスタイルが1回以上続いたのでclass指定することで拡張性を持たせています。
Softbankの920Pは画像領域が幅480pxと広いので、それに合わせ画像も幅480pxで作り直しました。（DoCoMo N905i、au K002は幅240px）

tagu1-Sof        tagu2-Sof

CSSは外部ファイルstyle.cssを作成し、head部分にリンク指定し適用させました。画像とテキストを左右に分ける箇所はfloatを使いました。

完成したSoftbankサイトはこちらです。

Softbank 920P

S-S1       S-S2

写真ではわかりにくいのですが、前回のブログで作成した”小さな画像を無理やり幅指定して大きくみせたもの”より画質はかなりよくなって見やすくなりました。あと、外部CSSにしたことでソースがかなり見やすくなり追加・変更・ミス探しが楽になりました。

DoCoMo、au機種でみてみると？

次は、このSoftbank用につくったサイトをDoCoMo、au機種でみてみます。

DoCoMo N905i

S-D1        S-D2

SoftbankとDoCoMoで異なる点を記載します。

  • DoCoMoは外部CSSに対応していないので、スタイルが全く適応されていません。
  • 絵文字が化けています。 （$OC ,$QL などと表示されている箇所）
  • 画像が大きくなっています。

au K002

S-au1        S-au2

Softbankとauで異なる点を記載します。

  • 一部の文字や画像にスタイルが適用されていません。
  • テロップの両脇に白い線があります。
  • 絵文字が化けています。（$OC ,$QL などと表示されている箇所）
  • 画像が大きくなっています。
  • コメントとして書いたはずの<!-バナー–>が表示されています。

違いを比較してわかったこと。

画像はwidthやhightに何も設定しないと自動調整なので、画像領域の違いで見え方が変化します。しかし画像幅はブラウザが自動的に調節してくれるようで、幅480pxの画像も綺麗に見えています。

DoCoMo

外部CSSが使えない。

au

floatは使えない。
その他文字などにスタイルが適用されていない箇所は書き方に問題があったようで、以下のとおりに変更したらスタイルは適用されました。

変更前

div#list{ font-size:small; }
div#list h2{ font-size:medium; }

変更後

div#list{ font-size:small; }
h2{ font-size:medium; }

テロップの線やコメントの問題は以前触れたのでここでは省きます。

所感

外部CSSをつかってみるとソースも見やすくなるので、追加変更がしやすいし間違いを発見しやすいと感じました。なぜDoCoMoは外部対応しないのでしょうか。

auとSoftbankはどちらも外部CSSがつかえるので同じように見えるかと思ったのですが、使えないプロパティやCSSの書き方の違いがあることに驚きました。

やはりどのキャリアに合わせようと、携帯サイト作成の道のりは大変なのかもしれません。

Page Top