iモードブラウザ2.0で対応しているi-CSS2についてご紹介します。

i-CSS2とは

i-CSS2はiモードブラウザ2.0以降で利用できるスタイルシートで、CSS2、WCSSに準拠しています。

記述方法

i-CSS2を使用するには次の3つの方法で記述します。

  • link要素により外部ファイルを読み込む。外部ファイルは1ページあたりの読み込みサイズに含まれ、最大ファイルサイズは500KBです。
    例: <link rel=”stylesheet” href=”aaa.css”>
  • style要素に記述する。
    例: <style type=”text/css”>body {color:red;}</style>
  • 各要素のstyle属性に記述する。
    例: <body style=“color:red;”>

属性名、値、疑似クラスは、半角大文字・半角小文字の区別をしません。ただし、-wap-input-format属性の値についてのみ半角大文字・小文字の区別を行います。

スタイル適用の優先順位については、以下の通りとなります。

  • より後ろで指定されているスタイルが優先されます。
  • 1つの要素に複数のstyle属性が指定された場合には、先に記述されたstyle属性が優先されます。
  • 各要素の属性とスタイル指定の内容が異なる場合、スタイル指定が優先されます。

なお、HTML文書/XHTML文書に関わらずi-CSS2は動作します。

書式

i-CSS2は基本的に次の書式で記述します。
セレクタ{属性:値;}

各要素のstyle属性に記述する際は次の書式で記述します。
<要素 style=”属性:値;”>

対応セレクタ

i-CSS2の対応セレクタを示します。

  セレクタタイプ 記述形式 スタイルシートの適用対象要素
1 汎用セレクタ * 全ての要素。
「*」の後にリンク擬似クラス、動的擬似クラス、クラスセレクタ、IDセレクタを指定する場合、「*」は省略してもよい。
2 要素セレクタ E 全てのEという名前の要素。(Eは任意の名前)
3 子孫セレクタ E F E要素の下にある全てのFという名前の要素。(E、Fは任意の名前)
4 リンク疑似クラス
(未訪問リンク)
E:link ハイパーリンク先のターゲットが未だ訪問されていないE要素。
5 リンク疑似クラス
(既訪問リンク)
E:visited ハイパーリンク先のターゲットが既に訪問済みのE要素。
6 動的疑似クラス
(選択中の要素)
E:focus 現在選択中のE要素。
7 クラスセレクタ E.warning 属性がclassであり、その属性がwarningであるE要素。(Eは任意の要素名、warningはその属性)
8 IDセレクタ E#myid id属性がmyidであるE要素。(Eは任意の要素名、myidは任意のid属性)

値のデータ型

対応属性一覧で用いる値のデータ型について示します。

  値のデータ型 定義
1 <color> 16進数による色指定、もしく色の名前を指定します。
2 <integer> 整数値を指定します。
小数点が指定された場合は小数点以下を切り捨て整数値として扱います。
3 <length> <integer>pxまたはemを指定します。
単位が省略された場合、pxとして扱います。小数点が指定された場合はpxについては小数点以下を切り捨て整数値として扱います。
4 <percentage> <integer>”%”を指定します。
基準値を100%として値を%単位で指定します。
5 <uri> url()の形式で指定します。

対応属性および値

i-CSS2の対応属性および値についてご説明します。

HTML/XHTMLの各要素に対する対応属性一覧表

HTML/XHTMLの各要素に対するi-CSS2の対応属性を確認できます。

技術資料ダウンロード

(PDFファイルが開きます)i-CSS2対応属性一覧表 (PDF形式:ファイルサイズ64KB)

Adobe Reader を入手する(別ウィンドウが開きます)

PDF形式のファイルをご覧いただくには、アドビシステムズ社から無償提供されている別ウィンドウ:Adobe® Reader® プラグインが必要です。「Adobe® Acrobat®」でご覧になる場合は、バージョン10以降をご利用ください。

このページのトップへ