携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
パソコン用のブラウザと言えば、Internet Explorerにはじまり、FireFox、Netscape、Opera、Safari等たくさんのブラウザが存在しています。

シェアこそIEの一本勝ちが続いていますが、
最先端のブラウザはというとIEは最下位?に転落してしまいます。
実はFireFoxやOpera等のブラウザの方がより先を行き、
W3Cという団体が定める規格により忠実な方針をとっているのがこれらのブラウザなんですよね。

携帯はというと、
現在は3キャリア(ドコモ、au、Vodafone)でシェアやユーザーの争奪合戦が繰り広げられています。

では、各携帯電話に搭載されているブラウザ(フルブラウザはまた別)というと、
auのEzwebの場合はOpenwave社の「Up.Browser」、
ドコモはiモード。これは独自なのかな。
Vodafoneはauと同じOpenwave社のブラウザだそうです。

これらの中で一番先を行くブラウザはauの「Up.Browser」でしょう。

何を基準に考えるかというと、
HTMLやXHTMLのWAP2.0対応というよりもCSSの読み込み具合で考えた方が手っ取り早いようです。

CSSの対応についてはPC向けブラウザも完全ではなく、先ほど述べたPC向け最先端ブラウザも100%対応している訳ではありませんが、やはり先を行くブラウザほどCSSの対応度が優れています。従ってこれを基準に携帯の場合も評価していくことにします。

具体的に見ていくと、
実はau機種でWAP2.0対応である機種(今現在はほとんどそう)はCSSの外部参照(CSSを外部ファイルで読み込む)に対応しています。

つまり、CSSをファイルを別に用意して、デザインをXHTMLとは別に制御できます。実機で確認したところ、ちゃんと参照してくれます。
<link>タグに対応している点からもこれは確認できます。

今現在でau機種のCSS対応状況ですが、概ねCSSレベル1程度には対応しているようです。(正確にはWAP CSS、W-CSS)

行間を空ける「line-height」やマージン、パディングなんかにも対応していました。

ただ、なぜか「a:visited」の様な擬似クラスには対応していないようです。完璧な対応ではないようですね。

一方、iモードはというと
最新の機種でもインライン指定にしか対応していない様子。
iモードの場合「i-CSS」なるものがあるらしく、

i-CSSは、iモード対応XHTML用のCSSです。
インラインのみに対応しています。
内部参照にも基本的に対応していませんが、以下に限り内部参照に対応しています。
・リンク擬似クラスa:link
・動的擬似クラスa:focus
・リンク擬似クラスa:visited
外部参照には対応していません。



とのこと。
外部参照には対応していないのはいただけませんね。
せめて内部参照に対応していないとCSSの意味がありませんよね。
CSSは飾りではなくて、デザインを一括で制御できるのが最大の利点です。

インライン、つまりタグに毎回「style=""」で書いていくのなら、そもそもCSSは必要ありません。HTMLタグで事足りますからね。

ということで今回のモバイルブラウザ対決はauの勝ちということになりそうです。

ちなみに、携帯電話向けのCSSの書き方はこちらで詳しく書かれています。

携帯電話向けのCSS





管理者にだけ表示を許可する





TRACK BACK
TB*URL





Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。