外部スタイルシートの使用 -- Flex 2.01

Flex では外部 CSS スタイルシートをサポートしています。ローカルスタイルシートの場所を宣言するか、グローバルスタイルシートを使用して、すべてのアプリケーションで使用するスタイルを定義することができます。現在のドキュメントおよびその子ドキュメントにスタイルシートを適用するには、<mx:Style> タグの source プロパティを使用します。

次の例では、"flex_app_root/assets" ディレクトリにある "MyStyleSheet.css" ファイルを指定します。

<?xml version="1.0"?>
<!-- styles/ExternalCSSExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Style source="../assets/SimpleTypeSelector.css"/>

  <mx:Button id="myButton" label="Click Here"/>
</mx:Application>

source プロパティの値は、スタイル宣言を含むファイルの URL です。source プロパティを使用する場合、その <mx:Style> タグの内容を空にする必要があります。<mx:Style> タグを追加して、他のスタイルを定義することもできます。インクルードするファイルには <mx:Style> タグを追加しないでください。

外部スタイルシートファイルには、タイプセレクタとクラスセレクタの両方を含めることができます。

CSS ファイルを SWF ファイルにコンパイルして、実行時にロードすることもできます。詳細については、実行時のスタイルシートのロードを参照してください。

サブトピック

デフォルトのスタイルシートについて

Flex には、すべてのアプリケーションで使用されるデフォルトのスタイルシートが用意されています。このスタイルシートを使用すると、Flex コンポーネントすべてに一貫したスタイルが適用されます。このファイルは "defaults.css" で、"/frameworks/libs" ディレクトリの "framework.swc file" ファイル内にあります。このファイルによって埋め込まれるプログラムスキンクラスは、mx.skins.halo パッケージに収められています。使用されるグラフィカルスキンも、"framework.swc" ファイルにあります。

デフォルトのスタイルシートで Halo テーマが構成されます。テーマの詳細については、テーマについてを参照してください。

"defaults.css" ファイルは暗黙的にロードされ、コンパイルの段階で Flex アプリケーションに適用されます。defaults-css-url コンパイラオプションを使用すると、デフォルトのスタイルとして明示的に他のファイルを指定できます。"defaults.css" ファイルは、その名前を変更するか、"framework.swc" ファイルから削除することで無効にすることもできます。

"defaults.css" ファイルでは、すべての Flex コンポーネントの外観と操作性が定義されています。アプリケーションに追加のテーマや CSS ファイルを適用しても、カスタムスタイルでオーバーライドされないコンポーネントに対しては、引き続き "defaults.css" に記述されたスタイルが使用されます。Flex からデフォルトテーマを完全に除去するには、"defaults.css" で定義されているスタイルをすべて削除するか、オーバーライドする必要があります。

Flex では他のスタイルシートも扱うことができるので、テーマを短時間で容易に適用できます。詳細については、付属のテーマファイルについてを参照してください。