合成スタイル

www.altova.com すべてを展開/折りたたむ このトピックを印刷 前のページ 1つ上のレベル 次のページ

ホーム >  SPS ファイル: 表示方法 > CSS スタイルを使用する >

合成スタイル

合成スタイルは CSS テキストスタイルプロパティのグループとして表示されており、XML インスタンスドキュメントにおけるノードの属性の値に対応します。更に、スタイルシートに収められている任意の CSS テキストスタイルプロパティグループも合成スタイルとして扱われます。合成スタイルは以下のデザインコンポーネントにて指定することができます:

 

自動計算
(コンテンツ)プレースホルダ
段落(ブロック)デザイン要素
テーブルセル

 

合成スタイルの利点

合成スタイルには以下のような利点があります:

 

スタイルプロパティは XML のデータで、ユーザーにより編集することができます。
上に示されるデザインコンポーネントのスタイルプロパティは、SPS にて割り当てられた XML に収められている複数のプロパティとなります。
SPS デザインの作成段階にて、SPS デザイナーは要素に関連付けられている複数の合成スタイル間を素早く切り替えることができます。

 

属性にて合成スタイルを入力する

複数のスタイルプロパティにより構成される合成スタイルは、ソース XML ドキュメントの要素における属性の値として入力されます。例えば、以下に示される XML ソースドキュメントの desc-sytle 属性には、デフォルトの合成スタイルが含まれます:

 

 <Desc desc-style="font-family:Verdana; font-size:12pt; color:blue">

 

同一要素に対して複数の合成スタイルを指定することもできます。この場合、各合成スタイルをそれぞれの属性に入力する必要があります:

 

 <Desc styleBlue="font-family:Verdana; font-size:12pt; color:blue"
       styleRed ="font-family:Verdana; font-size:12pt; color:red">

 

同一の要素にて複数の合成スタイルを指定することができる場合、デザインコンポーネントの合成スタイルプロパティにて値を入力する際に、合成スタイルの切り替えを行うことができます(以下を参照ください)。

 

メモ:

XML ドキュメントを妥当なものとするために、合成スタイルへアクセスするために使用される属性は、ソーススキーマにて定義する必要があります。

 

 

サポートされている CSS テキストスタイルプロパティ

合成スタイルでは、以下の CSS スタイルを使用することができます:

 

font-family

font-size

font-weight

font-style

color

background-color

text-align

text-decoration

 

 


 

 

合成スタイル値として属性を設定する

デザインコンポーネントの合成スタイルが属性として定義された場合、Authentic View ユーザーによりこの合成スタイルを編集することができるようになります。

 

以下の操作により、デザインコンポーネントの合成スタイルとして属性をセットすることができます:

 

1.デザインビューにて、属性を合成スタイルとして割り当てるデザインコンポーネントを選択します。以下のスクリーンショットでは、Desc 要素の (コンテンツ) プレースホルダが選択されています。

 

CompositeStyles

 

2.コンテンツコンポーネントの合成スタイルプロパティに表示されているコンボボックスに、コンテキスト要素の属性が表示されます(上のスクリーンショットの右下にあるプロパティウィンドウを参照ください)。デザインコンポーネントの合成スタイルとしてセットする属性を選択してください。コンボボックスには空のエントリーも表示されている点に注目してください。

 

XPath 条件式を合成スタイルの値としてセットする

XPath 条件式を合成スタイルプロパティの値としてセットすることもできます。しかしこの場合、合成スタイルの値が(XML ソースドキュメントではなく)SPS 内部に収められるため、Authentic View にて合成スタイルの編集を行うことができなくなります。

 

XPath 条件式を合成スタイルプロパティの値としてセットするには、プロパティサイドバーのツールバーにある XPath アイコンをクリックして、表示される XPath ダイアログにて XPath 条件式を入力します。XPath 条件式は属性値テンプレートとして評価され、戻り値は HTML style 属性の値(その他の出力フォーマットでは、それに準ずる値)になります。

 

例えば、以下に示される n1:Person 要素の(コンテンツ)プレースホルダにて作成された XPath 条件式を考えてみましょう。

 

         if (number(n1:Shares) gt 1000) then 'color:red' else 'color:green'

 

この条件式を使用することで、n1:Person 要素に n1:Shares という子要素が含まれており、その数値が 1000 を超える場合には n1:Person 要素の文字が赤色で出力され、それ以外の場合には緑色で出力されるようになります。XPath 条件式により返された値は、HTML style 属性の値として(その他の出力フォーマットでは、それに準ずる値が)出力ドキュメントに渡されます。

 

SPS により生成された XSLT スタイルシートでは、この XPath 条件式は以下にあるような属性値テンプレートとして評価されます:

 

 <span style="{if (number(n1:Shares) gt 1000) then &apos;color:red&apos; else &apos;color:green&apos;}">

 

HTML 出力では、条件の評価結果により、以下のどちらかが生成されます:

 

 <span style="color:red">

 

または

 

 <span style="color:green">

 

メモ:属性値テンプレートは、属性の値が XPath 条件式として読み取られる XSLT コンストラクターとなります。波括弧により区切られ、属性の値を動的に割り当てることができます。

 

 

 


(C) 2019 Altova GmbH