PR

WebデザイナーもFlexを使おう!

2008年7月9日(水)
高橋 義博

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を設定することができます。

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

制御機器メーカーでソフト開発やWebマスターの業務を経て、2007年からフリーランスとして、Webサイト制作、Flashコンテンツ制作を行っている。また、WebスクールでWebデザイン、Flash制作の講師などを担当し、経験を生かして幅広い指導を行っている。

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています