Flex 4 マスターシリーズ #04 Flex 4 CSS
作成日
28 March 2010
ページ ツール |
必要条件
ユーザーレベル
すべて
必要な製品
- Flash Builder 4 (Download trial)
Flex 4 マスターシリーズ 連載記事一覧
- #01 MXML 2009
- #02 Flash Builder 4 新機能
- #03 Flex 4 ステート
- #04 Flex 4 CSS
- #05 Spark コンポーネント
- #06 データ中心型開発（DCD） Part1
- #07 Spark Skining part 1
- #08 Spark Skining part 2
- #09 Flex 4 エフェクト
- #10 Flex 4 Spark Layouts
- #11 FlexUnit 4
- #12 データ中心型開発（DCD）Part2
はじめに
このチュートリアルでは、Flex 4 から新しく採用されたCSSについて紹介します。
ネームスペース
Flex 4 からネームスペース修飾子が、すべてのアプリケーションの CSS 宣言のタイプセレクタで必要になりました。
ネームスペースを定義する記法は、ネームスペース修飾子の後にネームスペース接頭辞と、ネームスペース名 (URI またはクラスパス ) を記述することによって定義できます。
具体的には、以下のように記述します。
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace s "library://ns.adobe.com/flex/spark";
@namespace sample "com.adobe.sample.*";
</fx:Style>
サンプルコード 01. Flex 4 アプリケーションの CSS 宣言上のネームスペース定義
定義した接頭辞は、タイプセレクタの直前を「パイプ (|) 」で区切り、記述します。
具体的には、以下のように記述します。
<fx:Style>
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Button { color:#990000; }
</fx:Style>
サンプルコード 02. Flex 4 アプリケーションのタイプセレクタ定義
セレクタ
Flex 3 以前のバージョンでは、下記 2 種類の CSS セレクタがサポートされていました。
Button { color:#009900; }
サンプルコード 03. Flex 3 タイプセレクタ
.special { color:#990000; }
サンプルコード 04. Flex 3 のクラスセレクタ
Flex 4 では、タイプセレクタ、クラスセレクタに加えて、新しいセレクタが採用されました。
id セレクタ ( サンプルプロジェクト : IDSelectorSample.fxp )
コンポーネントに割り当てた任意の id 名をセレクタとして使用することができます。id名の接頭辞に「ハッシュ記号 (#) 」を用いることで定義できます。
以下のコードでは、id が button001 と定義されている Button に対してのみ、スタイルを定義します。
<fx:Style>
# button001 { color : #990000; font-size : 40; }
</fx:Style>
<s:Button id="button001" /><!-- スタイルが適用される -->
<s:Button id="button002" /><!-- スタイルが適用されない -->
サンプルコード 05. Flex 4 の id セレクタ
子孫セレクタ ( サンプルプロジェクト : DescendantSelectorSample.fxp )
コンポーネントの親子関係 ( 祖先 - 子孫の関係 ) から、スタイルを定義することができます。子孫セレクタは、空白で区切られた 2 つ以上のタイプセレクタから構成することによって成立します。
以下のコードでは、Panel コンポーネントの子要素である Button に対してのみ、スタイルを定義します。
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|Panel s|Button { color : #990000; font-size : 40; }
</fx:Style>
<s:Panel>
<s:Button /><!-- スタイルが適用される -->
</s:Panel>
<s:Button /><!-- スタイルが適用されない -->
サンプルコード 06. Flex 4 の子孫セレクタ
疑似セレクタ ( サンプルプロジェクト : PseudoSelectorsSample.fxp )
コンポーネントのステートを疑似クラスとして扱うことによって、セレクタとしてスタイルを定義することができます。疑似セレクタは、ステート名の接頭辞に「コロン (:) 」を用いることで定義できます。
以下のコードでは、Button のタイプセレクタに対して疑似セレクタを適応させ、Button の各予約ステート (up, over, down, disabled) 単位で、スタイルを定義するサンプルコードです。
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|Button:up { color : #000000; font-size : 40; }
s|Button:over { color : #990000; font-size : 40; }
s|Button:down { color : #009900; font-size : 40; }
s|Button:disabled { color : #000099; font-size : 40; }
</fx:Style>
<s:Button /><!-- スタイルが適用される -->
サンプルコード 07. Flex 4 の疑似セレクタ ( 兼タイプセレクタ )
セレクタのパターン
Flex 4 で使用できる CSS セレクタのパターンは、前述で紹介したセレクタを併用することにより、以下のようなスタイル定義を実現できます。
/* タイプセレクタ */
s|Button { color:#009900; }
/* 一般的な id セレクタ */
#button001 { color:#999933; }
/* 一般的な id セレクタ兼疑似セレクタ */
#button001:up { color:#999933; }
/* 一般的なクラスセレクタ */
.special { color:#990000; }
/* 一般的なクラスセレクタ兼疑似セレクタ */
.special:up { color:#990000; }
/* 一般的な疑似セレクタ */
:up { color:#993300; }
/* タイプセレクタ兼 id セレクタ */
s|Button#button001 { color:#000099; }
/* タイプセレクタ兼 id セレクタ兼疑似セレクタ */
s|Button#button001:up { color:#000099; }
/* タイプセレクタ兼クラスセレクタ */
s|Button.special { color:#990000; }
/* タイプセレクタ兼クラスセレクタ兼疑似セレクタ */
s|Button.special:up { color:#990000; }
/* タイプセレクタ兼疑似セレクタ */
s|Button:up { color:#999900; }
/* 子孫セレクタ */
s|Panel s|Button { color:#990000; }
/* 子孫セレクタ兼 id セレクタ */
s|Panel s|Button#button001 { color:#990000; }
/* 子孫セレクタ兼 id セレクタ兼疑似セレクタ */
s|Panel s|Button#button001:up { color:#990000; }
/* 子孫セレクタ兼クラスセレクタ */
s|Panel s|Button.special { color:#990000; }
/* 子孫セレクタ兼クラスセレクタ兼疑似セレクタ */
s|Panel s|Button.special:up { color:#990000; }
/* 子孫セレクタ兼疑似セレクタ */
s|Panel s|Button:up { color:#990000; }
サンプルコード 08. Flex 4 で使用できるセレクタのパターン
おわりに
以上が Flex 4 から新しく採用された CSS でした。
Flex 3 以前は 2 種類しかなかったセレクタが、大幅にバージョンアップして細かくスタイル定義できるようになったことに気付いていただけたかと思います。
これらのチュートリアル、サンプルコードを試すことによって、Flex 4 アプリケーションの表現の幅をより広げることができるでしょう。
