Wireless CSSについて

By fukumoto - 08/10/10 - このエントリをはてなブックマークに追加このエントリをYahoo!ブックマークに追加このエントリをdel.icio.usに追加このエントリをFC2ブックマークに追加

前回までを振り返ると、携帯サイトで使える言語ということで、

XHTML Basic、XHTML MP、CSS MPについて書いてきました。
そのシリーズも今回で終了です。
 

その最後の一つの、WCSSを紹介します。
 

WCSS(Wireless CSS)とは?
 

WCSSは、Wireless CSS の略称で、CSS に “-wap-” prefix を追加拡張したサブセットで、
前述のOMAが制定した仕様です。

 

前回お話したW3Cが勧告したCSS Mobile profileに、いくつかの
 

  • プロパティ、値
  • 独自拡張

 
が追加されたものです。今回はこの追加分だけご紹介しますので、
その他のものは前回記事をご参照下さい。
 

WCSSで追加された独自拡張#1
 

以下の項目が独自拡張として追加されました

  • display: -wap-marquee;   marquee要素をCSSで表現するプロパティ
  • -wap-marquee-style   マーキーの挙動
  • -wap-marquee-loop   マーキーの繰り返し回数
  • -wap-marquee-dir   マーキーの方向
  • -wap-marquee-speed   マーキーの速さ

 
WCSSで追加された独自拡張#2
 

  • -wap-accesskey
    特殊なキーや複数押しボタンなどをアクセスキーに指定
  • -wap-input-format
    入力フォームの文字の種類や並び方を指定
  • -wap-input-required
    入力しなければならない文字などを指定

 
主だったところではこんなところです、OMAの仕様書をご覧頂くと、
携帯サイト仕様の言語の詳細がもっと載っています。
参考にコチラのサイトからどうぞ。掘り下げていくと色々でてきます。
 

前回今回とモバイル仕様のCSSについて書きましたが、
2つを比べると、WCSSはモバイルに特化していますが、
日本の携帯電話ではCSS Mobile Profileで十分です。
 

では、ここで初めに戻り各キャリアの対応状況などを見ていきます。
 

日本の三大キャリアである

  • NTT DoCoMo
  • AU
  • SoftBank

 
それぞれに対応する仕様を以下のように公表しておりまして、
 

NTT DoCoMo
WAP2.0互換な(XHTML Mobile Profileを基にした)iモード対応XHTML
 
au by KDDI
XHTML Basic / iモード対応HTML
 
SoftBank
XHTML Basic / XHTML Mobile Profile / iモード対応HTML
 

これを見るとお分かり頂けるように、
DoCoMoは公式に、WAP2.0互換な(XHTML Mobile Profileを基にした)iモード対応XHTML
と発表しておりますが全然互換しておりません。
 

link要素をサポートしておりません
 

さらには、style要素にかけるのは擬似クラスと動的クラスのみ、
WAP2.0で推奨しているCSSにはstyle属性にてサポートしているのみです
style属性でサポートしているっていっても…
 

<font color="char">...</font>

 
これが
 

<span style="color: char;">...</span>

 

になるだけです。
 

まぁ、書き換える意味はないですね。
 

その他のキャリアは比較的対応しています。
AUとSoftBankは前述のXHTML MPを使用してもまず問題はありません。
 

CSSについても比較的サポートされているようです。
 

この現在の状況を簡単にまとめると、
 

  • auとSoftBank
  • DoCoMo

 
携帯サイト作成においては上記のようにキャリアを分けて考える。
XHTML+CSSでサイトを作成しようと思うと、
DoCoMo用にコンテンツを別で用意しなくてはなりません。
 

これが前回、インラインで書くのが多くなるといった理由です。
何回も何回も書くのはめんどくさいですから、
もう予めDoCoMoに合わせようと苦肉の策をとるからです。
やっぱり、当たり前ですがPCサイトに比べると大分制限されますね。
でも一昔前に比べると全然使いやすくなったのではないでしょうか。
これからどんどん使いやすくなることを期待します。
 

以上のことからこれからは全キャリア対応前提での、内容を記載しようと思います。
 

おさらい
携帯サイト作成において、知っていると良い知識。
XHTML BasicXHTML Mobile ProfileCSS Mobile Profile、Wireless CSS。
この4つを一通り抑えておくとまぁ問題ありません。
 

基礎知識もほどほどに、次回からは実践を書きたいなと思います。では。
 
 

参考サイト
 
 

CSS Mobile Profile 2.0 [日本語訳]
http://www1.ttcn.ne.jp/amotohiko/WD-css-mobile-20061208
 

CSSとはなんだろうか
http://msugai.fc2web.com/web/CSS/index.html
 

miniturbo.org「モバイルでのXHTMLとCSS」
http://miniturbo.org/lab/sample/presentation/mobile/