携帯電話向けのCSS。
携帯電話で使う事の出来るカスケーディングスタイルシート(CSS)のセレクタ及びプロパティを解説します。
- 携帯電話でのCSSのセレクタ・プロパティは、参考資料・オープンウェーヴ社が定めているCSSのプロパティに移転しました。
- また、
- 携帯電話用のCSSを書くに当たって
- CSS非対応機種との兼ね合い
も別文書・携帯電話向けのCSSを書くに当たってに移転しました。
- CSSに関して基本的な事柄については、CSS入門(HTML&CSS入門)をご覧下さい。また、各プロパティなどの詳細はCSS(カスケーディングスタイルシート)及びCSSリファレンスをご覧下さい。
携帯電話でのCSSについて。
WAP 2.0でのCSS。
EZウェブ及びソフトバンクの現行機は、WAP 2.0に準拠しているため、CSSを使う事が出来ます。
但し、携帯電話のCSSには幾つかの制限があります。
また、実際にはWAP 2.0の仕様を忠実に実装していないようです。
- 特にEZウェブ端末でのCSSに関しては、参考資料・オープンウェーヴ社が定めているCSSのプロパティをご覧下さい。
尚、ｉモード端末も現行フォーマ端末ではCSSに対応していると言われておりますが、実際に利用するに当たっては他のキャリアとは全く異なる条件があり、このため今もCSSには対応しているとは言えません。
モバイル向けフルブラウザでのCSS。
オペラやネットフロントなどのフルブラウザについても、CSSに対応しているものがあります。
- ジグブラウザなどアプリ型のフルブラウザでは、CSSに対応していないものが多いようです。
特にイー・モバイル機やウィルコム現行ウェブ対応機は、全てCSS対応のフルブラウザを実装しております。
但し、フルブラウザはPC向けフル規格ウェブコンテンツの閲覧を前提としているので、WAP 2.0向けのCSSでのセレクタやプロパティに関する制限は概ね取り払われる事になります。
だからと言って、WAP 2.0の枠から外れたプロパティを利用すると、
- WAP 2.0端末では互換性の問題から
- フルブラウザでは液晶画面の領域の狭さから
それぞれ閲覧の障害になり得る事が予想されます。
WAP 2.0でCSSの仕様からあるプロパティが省略されるのには、それなりに理由がある筈だと言う事です。
その意味でも、WAP 2.0向けのCSSで解説しているプロパティのみを利用するようにするのが賢明と言えるでしょう。
携帯電話でCSSを使うには。
携帯電話専用のCSSを当てるには、スタイルシートをリンクする<link>要素において、「media="handheld"」属性を追加します。
これに依り、PCは当該スタイルシートを無視します。
逆にPC向けスタイルシートを携帯電話で読み込まないようにするには、当該スタイルシートをリンクする<link>要素において「media="screen, projection "」属性を当てておきます。
- 多くの携帯電話では自社の携帯電話ブラウザを
handheldメディアとして扱っていますが、標準規格に依れば携帯電話ブラウザはttyメディア(等幅文字のみに依る画面)とも解釈出来ますので、携帯電話向けはhandheld, ttyメディアとした方が良さそうです。 - PCブラウザは原則的に
screenメディアとして扱っていますが、オペラのフルスクリーンモードはprojectionメディアとしております。従って現状ではPC向けのCSSはscreen, projectionメディアとすべきです。こうする事でCSSの実装に大きな問題を抱えているネットスケープ 4.xでも当該スタイルシートを無視するようになります。
具体的には、HTML文書のヘッダには以下のように書けば良い事になります。
<link rel="stylesheet" type="text/css" href="携帯電話専用CSSファイルのURI" media="handheld, tty" /> <link rel="stylesheet" type="text/css" href="PC専用CSSファイルのURI" media="screen, projection " />