スタイル・シートの使用法

この章では、CSS スタイル・シートを Zen Mojo ページに組み込んで使用する方法について説明します。以下のトピックについて説明します。

レイアウト・オブジェクトのスタイル情報を指定する方法

レイアウト・グラフでは、通常、特定のレイアウト・オブジェクトの CSS クラスや CSS スタイルを制御するプロパティを指定できます。以下に例を示します。

    {type:'$ContentPane',key:'layoutContainer-1',style:'width:100%;height:100%;'
    ...
    }

詳細はレイアウト・オブジェクトごとに異なります。

スタイル・シートの組み込み

Zen Mojo アプリケーションでは CSS スタイル・シートを使用できます。これは、以下の方法の任意の組み合わせで実現できます。

アプリケーション・クラスまたはページ・クラスのいずれかに、スタイル・シートを直接組み込みます。
そのためには、Style という名前の XData ブロックを含める必要があります。以下に簡単な例を示します。
```
XData Style
{
<style type="text/css">

table.tpTable {
         background: green;
         border: 1px solid red;
         font-family: courier new;
       }

</style>
}
```
スタイル・シートのコンテンツをコピーして XData ブロック、つまり、<style type="text/css"> タグと </style> タグの間にペーストします。
スタイル・シートをページ・クラスに組み込むと、そのスタイルがページ・クラスで利用できるようになります。
スタイル・シートをアプリケーション・クラスに組み込むと、そのスタイルが、このアプリケーション・クラスを使用するすべてのページ・クラスで利用できるようになります。Zen Mojo では (Zen とは対象的に)、アプリケーションには通常、1 つのページしかありません。
アプリケーション・クラスまたはページ・クラスのいずれかの CSSINCLUDES パラメータを定義します。値に、CSS スタイル・シートのコンマ区切りリストを指定します。以下に例を示します。
```
Parameter CSSINCLUDES = "dojo-release-1-9-1/dijit/themes/claro/claro.css,
dojo-release-1-9-1/gridx/resources/claro/Gridx.css";
```
Caché では、相対パスがディレクトリ install-dir/csp/broker を参照することを前提としています。アプリケーション・クラスのパラメータは、そのアプリケーション・クラスを使用するすべてのページ・クラスに影響します。ページ・クラスのパラメータは、そのページ・クラスにのみ影響します。
または、CSS バージョン 3.0 を使用している場合は、同様の方法で CSS3INCLUDES パラメータを指定します。

スタイルの優先順位

Zen Mojo によってページが生成されると、すべての CSS スタイル情報が収集され、以下の順序でこれらのソースの情報が適用されます。ただし、この順序で競合が発生する場合は、最後に定義されたスタイルが優先されます。

Zen コンポーネント・ライブラリの CSS ファイルによって定義されたスタイル。ファイル名の形式は ZEN_Component_*.css となります。
適切なアプリケーション・クラス (存在する場合) に定義されたスタイル。これらのスタイルは以下の順序で評価されます。
- CSS 文を含む XData Style ブロック
- CSSINCLUDES パラメータを使用した、外部 CSS ファイルへの参照
ページ・クラス内で定義されたスタイル。これらのスタイルは以下の順序で評価されます。
- CSSINCLUDES パラメータを使用した、外部 CSS ファイルへの参照
- CSS 文を含む XData Style ブロック
- レイアウト・グラフ内のプロパティ。個々のレイアウト・オブジェクトについて、以下が指定されます。
  - HTML 属性の単純な値 (height の "300" など)。
  - リテラル CSS 文 ("color:red; background:yellow;" など)。
  - スタイルのカスケード内に定義されている CSS スタイルの名前。

特定の場所で使用される CSS スタイルの名前を決定するには、ブラウザまたは適切なアドオン・ツールを使用して、生成された HTML を直接調べます。