ローカルスタイル

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

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

ローカルスタイル

スタイルがローカルで定義されると、コンポーネントに対してスタイルが直接定義されます。ローカルのルールは、グローバルのスタイルルールならびに外部 CSS スタイルシートよりも高い優先度を持つことになります。ローカルで定義されるスタイルは CSS スタイルで、 フォーマットツールバー または スタイル サイドバーにて定義されます(グローバルスタイルの定義と外部 CSS スタイルシートの定義は スタイルレポジトリ で行われる点に注意してください)。

 

フォーマットツールバーを使用してのローカルスタイル指定

デザイン内のコンテンツを選択し、フォーマットツールバーからローカルスタイルを適用することができます(以下のスクリーンショットを参照)。

 

TBarFormatting

 

divh1pre といった定義済みの HTML フォーマットに対して、テキストのスタイル、背景色、テキストの配置、ハイパーリンクを適用することができます。詳細については、フォーマットツールバーのセクションを参照ください。

 

スタイル サイドバーを解してのローカルスタイル指定

以下に示されるステップにより、ローカルにおけるスタイルの定義を行うことができます:

 

1.スタイルを作成するコンポーネントをデザインビューにて選択します。ノードタグを除く全てのコンポーネントのスタイルを作成することができます。デザインビューにて選択されたコンポーネントが、スタイルサイドバーのスタイルペインに表示されます(以下のスクリーンショットを参照)。以下のスクリーンショットは、コンテンツコンポーネントがデザインビューにて選択された状態で、コンテンツがスタイルカラムに表示されます。

 

StylesSB01

 

デザインビューにて選択されているコンポーネントが他のコンポーネントを含んでいる場合、選択されたコンポーネント内部にあるその他全てのコンポーネントが、コンポーネントの種類ごとにスタイルサイドバーのスタイルカラムにて表示されます。以下に示されるスクリーンショットではデザインビューにて選択されたコンポーネントに含まれているコンポーネントの種類が表示されています。各種コンポーネントの左には、選択対象内部に存在するインスタンスの数が表示されます。例えば、以下のスクリーンショットでは、16個のテキストコンポーネントと2個の自動計算コンポーネントが選択対象に含まれていることが分かります。あるコンポーネントが選択された状態で Shift キーを押下したまま別のコンポーネントを選択することで、選択された範囲内のコンポーネント全てを選択することができます。

 

SS_Styles_MultiStyled

 

2.デザインビューにて選択を行い、スタイルペインにてスタイルの指定を行うコンポーネントの種類を選択します。選択されたコンポーネントの種類が複数個ある場合、定義したスタイルはそれらのコンポーネント全てに対して適用されることになります。例えば、上のスクリーンショットにある16-テキストアイテムを選択した場合、定義したスタイルは16あるテキストコンポーネント全てに対して適用されることになります。このうち4個のテキストコンポーネントだけを個別に定義したい場合、目的のテキストコンポーネントを個別に選択してスタイルの定義を行う必要があります。異なるスタイル値を持ったコンポーネントがデザインビューにて選択されている場合、それらの値全てがスタイル定義ペインに表示されます。上のスクリーンショットでは、ある自動計算に normalfont-weight を割り当てられている一方で、別の自動計算には bold font-weight が割り当てられていることが分かります。
3.スタイルペインにてスタイルを定義するコンポーネントを選択し、 スタイル定義ペイン にてスタイルの定義を行います。定義方法については、 スタイルの値の設定.セクションを参照ください。

 

 

スタイルの値の設定 スタイルプロパティの定義方法に関する情報。
グローバルスタイル グローバルスタイルの使用に関する情報。
外部 CSS スタイルシート 外部 CSS スタイルシートの使用に関する情報。
スタイル サイドバー スタイル サイドバーの説明
CSS サポート CSS サポートのレベルを調節する出力ドキュメントの設定に関する説明

 


(C) 2019 Altova GmbH