Flex BuilderでAIRアプリ制作第2回

CSSを利用して、デザインの設定をしてみよう

　Flex Builder3では、CSSを利用してコンポーネントのデザインを設定することができます。ただし、CSSの仕様で定められているプロパティの中では、使用できるプロパティが限定されています。CSSの仕様で定められている内容では、文字に対する設定項目が主な内容になっています。そのほかに、Flex独自の記述もありますので、詳しくはFlex 3のヘルプ（http://livedocs.adobe.com/flex/3_jp/html/help.html?content=styles_01.html）を参照ください。

　CSSの記述方法は、外部CSSファイルを読み込む方法と、直接MXMLに記述方法があり、記述ルールは通常のCSSと同じ記述ルールとなっています。このように機能制限はありますが、Webデザイナーの方になじみのあるCSSが利用できるのも、Flex Builder3の特長になっています。

　では、前回同様コンポーネント「Label」を利用して、CSSを設定していきます。

ラベルコンポーネントをCSSでデザインする

　前回と同じ手順で、「Label」コンポーネントを配置してください。今回は、Flexプロパティでデザインを設定するのではなく、「ソースモード」に直接CSSを記述していきます。

　CSSは、の間に記述することができ、要素名やStyleName属性の値を指定して、プロパティを設定していきます。外部CSSファイル指定する場合には、と設定します。

　今回はApplication要素とLabel要素に対して図3のようにCSSを設定し、表示結果のようになりました。このように、Flex Builder 3 ではHTML用のCSSと同じように、CSSを設定することができます。

　次回は、コンテンツ作成の説明をしていきますので、お楽しみに！