参考資料・オープンウェーヴ社が定めているCSSのプロパティ。

EZウェブ端末が実装しているオープンウェーヴ社のモバイルブラウザに実装されているカスケーディングスタイルシート(CSS)について解説します。

ソフトバンクなど、オープンウェーヴ社以外のユーザエージェントを実装するキャリアもありますが、オープンウェーヴ社の実装は最大公約数的なもの、すなわちどのCSS対応ユーザエージェントでも実装されている筈のものと思われます。

オープンウェーヴで使えるCSSのセレクタ。

オープンウェーヴで使えるCSSのセレクタには、以下のものがあります。

尚、属性セレクタ及び隣接セレクタなど、WAP 2.0では利用出来ないセレクタがあります。

また、クラスセレクタについて、複数クラスの同時指定をサポートしておりません。(平成18年12月19日)

オープンウェーヴで使えるCSSのプロパティ。

オープンウェーヴ社で使えるCSSのプロパティには、以下のものがあります。

公式に定められているCSSのプロパティ。

テキストプロパティ
フォントプロパティ
カラープロパティ

尚、background-attachmentプロパティは使えません。

マージンプロパティ

勿論、margin-topプロパティなど、上下左右個別のプロパティも使えます。

ボーダプロパティ

尚、border-styleプロパティは使えません。

また、border-top-colorプロパティなど、上下左右個別のプロパティも使えます。

パディングプロパティ

勿論、padding-topプロパティなど、上下左右個別のプロパティも使えます。

ブロックサイズプロパティ
リストスタイルプロパティ

非公式に実装されたCSSのプロパティ。

仕様書には載っておりませんが、display: noneプロパティも有効です。

つまり、display: noneプロパティを活用して、PC向けのコンテンツを非表示にする事も可能です。

WAP 2.0独自のプロパティ。

公式なWAP 2.0でのCSSには、以下のプロパティも定義されております。

これらは、W3Cが策定した一般のCSS仕様には無いもので、従ってPCのブラウザではエラー(無効)になるものです。

  • オペラ 7.x以降では、一部を除いて実装されているようです。
display: -wap-marqueeプロパティ
-wap-marqueeプロパティ群
マイクロソフト独自要素として知られる<marquee>要素をCSSで実現するためのプロパティ群です。
  • 当然ながらXHTML モバイル・プロファイルには<marquee>要素はありませんが、これまでに多くの端末に実装されているため、CSSで対応せざるを得なかったのでしょう。

display: -wap-marqueeプロパティは、内容が自動的にスクロールするブロックレヴェル式のボックス指定となります。

より細かい設定を行うために、以下のプロパティも用意されております。

-wap-marquee-styleプロパティ
マーキーのやり方を指定します。

値に「scroll(内容がボックスから消え去るまでスクロールする)」「slide(内容がスクロール先の端に達するまでスクロールする)」及び「alternate(内容がボックスの端に達したら方向を反転させる)」が撰べます。

-wap-marquee-loopプロパティ
マーキーの繰返し回数を指定します。

自然数値ならその回数だけ繰返し、「infinite」キーワードの場合は無限回繰返します。

-wap-marquee-dirプロパティ
マーキーの方向を指定します。

「ltr(左から右)」「rtl(右から左)」を指定します。

  • 「-wap-marquee-style: alternate;」プロパティを当てている場合は、奇数回目の方向を指定する事になります。
-wap-marquee-speedプロパティ
マーキーの速さを指定します。

「fast」「normal」「slow」の順に速くなります。

-wap-accesskeyプロパティ
<a>要素のaccesskey属性値で指定出来ない特殊なキーや複数ボタン押しなどをアクセスキーに指定する場合に用います(詳細は割愛)。
-wap-input-formatプロパティ
入力フォームに入力出来る文字の種類や並び方を指定します(詳細は割愛)。
-wap-input-requiredプロパティ
入力フォームに入力しなければならない文字などを指定します(詳細は割愛)。

オープンウェーヴ社のCSSに見られるバグ。(平成19年 9月 9日)

オープンウェーヴ社のブラウザは、他のCSS対応ブラウザに較べるとCSSの実装が今ひとつと言えます。

以下、制作者が気付いた重要と思われるバグを挙げておきます。

オープンウェーヴ社のブラウザに見られる、要素に絡むCSSのバグ。

この他にも結構バギーな面があるようです。勿論、旧来の物理要素・属性でのデザイン以上の事は問題無く出来るのですが。

オープンウェーヴ社のブラウザに見られる、@import規則のバグ。(平成19年 9月 9日)

オープンウェーヴ社のブラウザでは、@import規則で別のスタイルシートをインポートしようとしてもインポートされず、従って@import規則が認識されないように見えますが、実際にはインポートを試みております。

しかし、その際にバグが原因で正しいスタイルシートにアクセスしようとせず、結果的にインポートに失敗するのです。

具体的には、

  • オープンウェーヴ社のブラウザでは、@import規則で指定されるスタイルシートへの相対パスは、@import規則を記述しているスタイルシート基準ではなく、そのスタイルシートをリンクしているHTML文書基準

となっているのです。

例えば、

@import "sub.css";

と言う@import規則を含めたスタイルシート www.hoge.net/style/main.css をHTML文書 www.hoge.net/mobile/index.html からリンクした場合、オープンウェーヴ社のブラウザではこの sub.css を元のスタイルシートのパス基準である www.hoge.net/style/sub.css ではなく、HTML文書基準となる www.hoge.net/mobile/sub.css から取得しようとします。

偶々そのURIで示されるスタイルシートがあればそれがインポートされる筈ですが、スタイルシートなどそう沢山作る訳も無いので、大抵は Not Found エラーとなってインポートに失敗すると言う訳です。

  • 特に全てのスタイルシートをHTML文書とは完全に別のディレクトリに設置している場合には絶対にインポートされない事となります。
  • このバグは恐らく知られていると思われますが、制作者はアクセス解析を見ていてこのバグの存在に気づきました。

オープンウェーヴ社のバグ対策。(平成19年 9月 9日)

  • 左右のmarginプロパティ及びpaddingプロパティは下手に設定すると、もじら系ブラウザ, オペラ及びネットフロントなどを搭載した端末(PC, ウィルコム, ソフトバンクなど)で逆に正常に表示出来なくなります。

    ですから、左右のmarginプロパティ及びpaddingプロパティは設定しない方が賢明でしょう。

  • 逆にもじら系ブラウザ, オペラ及びネットフロントなどを搭載した端末(PC, ウィルコム, ソフトバンクなど)でより精密なスタイルを定義したい場合は、@import規則を活用して別ファイルにします。
    • オープンウェーヴ社のブラウザは@import規則を認識しません。
    • このとき、HTML文書のディレクトリに同名のスタイルシートは置かないようにします。置いた場合、HTML文書のディレクトリ階層に依ってはそのスタイルシートが読み込まれる場合があるからです。出来ればスタイルシートはHTML文書とは完全に分離した専用のディレクトリに収めると良いでしょう。

しらぎくのウェブサイト作成入門サイトマップ