#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ほげほげをつかった命名がよいでしょう。
個人的には、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%表示もできる（オブジェクトにあわせて伸縮する）
-ボタン類のグラデーション、角丸、透明度、アイコンをCSSで設定できる。
-[[Scale 9:http://www.adobe.com/jp/devnet/flex/quickstart/embedding_assets/#EmbeddingImagesScale9]]が便利。四隅を指定できるので、伸縮自在。
はよい点だと思う。（HTMLでもできるようになってほしいなぁ）
***CSSファイルの扱い [#gd44a50c]
あと、CSSで注意したい点としては、
HTMLだとページ単位でCSSを読み込むのでどんなに遷移しても
a.html(include a.css)→b.html(include b.css)
と、ページ単位でincludeしたCSSのみ読み込みますが、
Flexの場合は、
a.swf(include a.css)→b.swf(include a.css+b.css)→a.swf(include a.css+b.css)
と、一度読んだものが保持されてしまうんですね。
HTMLとは違い、styleNameを徹底的に分ける、など設計をきちんとする必要があります。
**一番困ったこと。 [#b8f36062]
-''折り返されない！！''
「折り返し表示」が鬼門。
意外と当たり前に思うことができません。。
HTMLだと複数子オブジェクトが横幅いっぱいになったら折り返しますが、
折り返さずに親の幅をどこまでも広げていってしまいます。
たとえばこういうこのように突き抜けます。
#flash( /sandbox/design/data/flex/sample02_01.swf, 360x270, version=9)
対策として、ライブラリflowBoxを使用して解決しました。
http://code.google.com/p/flexlib/wiki/ComponentList
しかし、これにはちょっと参りました。。。
数や長さが確定していないオブジェクトを表示するときは
レイアウトを考えたほうがよさそうです。
***ちなみに、テキストの場合： [#h400f9a4]
-labelは折り返し不可。文字が省略されます
-Textは複数行表示可能、折り返したい場合はwidthを指定。
**便利ツール [#zaf750eb]
便利なツールあれこれ。このへんをうまく使ってデザインしましょう。
- StyleExplorer
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
コンポーネントごとにスタイル設定をその場で試せる。
（全部のスタイルが用意されているわけではないけれど）
ほかにどんなスタイルが指定できるかは、これを見たほうが早いっす。
- flex Spy
http://code.google.com/p/fxspy/
要はFirebugです。ボタンを埋め込んで使用することができる。これは便利。
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
