#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で指定できるのは素敵だと思う。アイコン+背景も設定できるし。
**レイアウト [#zbf3e6e0]
レイアウトによく使うのは、Box、HBox、VBox。divみたいなものです。
Flexの場合、ぶっちゃけていうと、要は''テーブルレイアウト''です。
floatとかabsoluteとかの概念はあまりない。
//ブロックレベル、インラインレベル
Boxは、子オブジェクトの並ぶ向きを決められます。VBoxは縦、HBoxは横。
<mx:VBox width="100%" height="100%" >
<mx:Button label="Boo" width="100" height="18" />
<mx:Button label="Hoo" width="100" height="18" />
<mx:Button label="Wooooo" width="100" height="18" />
</mx:VBox>
↑子を縦に並べる。
<mx:HBox width="100%" height="100%" >
<mx:Button label="Boo" width="100" height="18" />
<mx:Button label="Hoo" width="100" height="18" />
<mx:Button label="Wooooo" width="100" height="18" />
</mx:HBox>
↑子を横に並べる。
tableによるHTMLソースよりシンプルなソースになります。
また、Boxはオブジェクトとオブジェクトの間隔を設定することが可能です。
これによって均等配置はHTMLよりきれいにできる。
**CSSerが戸惑うところ。XHTML+CSSとの違い [#d2a3dc6d]
CSSを修正してデザインを変える、という点で共通なのですが、
やはり独自の癖みたいのがあります。
（以下、flex3の場合）
-marginはCSSで設定できない。エー
-paddingはCSSで設定できる。
-width,heightはmxmlのほうに記述しないといけない
-継承が効かない。
.content .main Button
みたいなことができないので、グローバルに設定するか、
個別にstyleNameをつけてあげないといけないのが歯がゆい。
-背景画像が扱いづらい
--背景画像は繰り返される。（no-repeatがない）
--背景画像は中央配置になる。（positionがない）
背景画像の多用でデザインをすることが多いと思われるので、これはちょっときつい制限だとおもう。
逆に、
-背景画像は100%表示もできる（オブジェクトにあわせて伸縮する）
-9sliceが便利。
-ボタン類のグラデーション、角丸、透明度、アイコンをCSSで設定できる。
はよい点だと思う。
**一番困ったこと。 [#b8f36062]
（この記事は途中です）
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
