アークウェブWebデザインSandBox

• バックアップ一覧
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• WebデザイナーにもわかるFlex画面デザイン（2） へ行く。
  • 1 (2008-10-02 (木) 12:31:30)
  • 2 (2008-10-02 (木) 12:53:09)
  • 3 (2008-10-09 (木) 12:06:45)
  • 4 (2008-10-09 (木) 13:49:45)

• 追加された行はこの色です。
• 削除された行はこの色です。

#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]
 
 （この記事は途中です）