WebデザイナーにもわかるFlex画面デザイン（2）

（この記事は途中です）

WebデザイナーにもわかるFlex画面デザイン（1）のつづき。
Flexでのデザインの調整について書きます。

[edit]

スタイルシート †

Flexではスタイルシートが使えます。
書式はHTMLでつかうものとよく似ています。

1）インラインでも書けるし、

<mx:Button color="#ff0000">

2）mxml内にも書けるし、

<mx:Style>
Button{
	color: #ff0000;
}
</mx:Style>

3）スタイルシートにも書ける。

<mx:Style source="stylesheets/hoge.css" />

表示結果はいずれでも同じ。

でも構造と表示は分けたほうがよいので、やはり3）のようにスタイルシートに記述したほうがよいですね。
ちなみに、<mx:Style>は<mx:Application>直下に書かないとエラーになります。

上記のようにグローバルに指定する以外に、「styleName」が使えます。
classみたいなもんですね。

<mx:Button styleName="hogeButton" />
↑
[edit]

便利ツール †

便利なツールあれこれ。

個人的には、Flexだとボタンとかにグラデーションやアルファ値、角丸の程度をCSSで指定できるのは素敵だと思う。アイコン+背景も設定できるし。

↑
[edit]

レイアウト †

レイアウトによく使うのは、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よりきれいにできる。

↑
[edit]

CSSerが戸惑うところ。XHTML+CSSとの違い †

CSSを修正してデザインを変える、という点で共通なのですが、
やはり独自の癖みたいのがあります。

（以下、flex3の場合）

.content .main Button

みたいなことができないので、グローバルに設定するか、
個別にstyleNameをつけてあげないといけないのが歯がゆい。

背景画像の多用でデザインをすることが多いと思われるので、これはちょっときつい制限だとおもう。

逆に、

はよい点だと思う。

↑
[edit]

一番困ったこと。 †

（この記事は途中です）

トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)