#topicpath
（この記事は途中です）
[[WebデザイナーにもわかるFlex画面デザイン（1）]]のつづき。
Flexでのデザインの調整について書きます。
**スタイルシート [#cb0b9d14]
Flexではスタイルシートが使えます。
書式はHTMLでつかうものとよく似ています。
1）インラインでも書けるし、
<mx:Button color="#ff0000">
2）mxml内にも書けるし、
<mx:Style>
Button{
color: #ff0000;
}
</mx:Style>
3）スタイルシートにも書ける。
<mx:Style source="stylesheets/hoge.css" />
-hoge.cssの内容
Button{
color: #ff0000;
}
表示結果はいずれでも同じ。
//（キャプチャ）
でも構造と表示は分けたほうがよいので、やはり3）のようにスタイルシートに記述したほうがよいですね。
ちなみに、<mx:Style>は<mx:Application>直下に書かないとエラーになります。
上記のようにグローバルに指定する以外に、「styleName」が使えます。
classみたいなもんですね。
<mx:Button styleName="hogeButton" />
-cssの指定
.hogeButton{
color: #ff0000;
}
//（キャプチャ）
//なお、idはスタイル指定には使用できません。（あれほんと？）
//mxmlでは、スタイル名にハイフンは使えません（あれほんと？）
//lowerほげほげをつかった命名がよいでしょう。
***便利ツール [#zaf750eb]
便利なツールあれこれ。
- StyleExplorer
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
コンポーネントごとにスタイル設定を試せる。
ほかにどんなスタイルが指定できるかは、これを見たほうが早いっす。
- flex Spy
要はFirebugです。ボタンを埋め込んで使用することができる。これは便利。
個人的には、Flexだとボタンとかにグラデーションやアルファ値、角丸の程度をCSSで指定できるのは素敵だと思う。アイコン+背景も設定できるし。
（この記事は途中です）
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
