外部スタイルシート

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

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

外部スタイルシート

このセクションでは StyleVision の GUI から外部 CSS スタイルシートを管理する方法について説明します。以下にある項目を説明します:

 

外部 CSS スタイルシートを SPS へ追加する
外部 CSS スタイルシートにおけるコンテンツの確認と修正を行う
優先順位を変更する
CSS スタイルシートセットと、単一の CSS スタイルシートを切り替える

 

外部 CSS スタイルシートは、 スタイルレポジトリ サイドバーデザイン概要サイドバーという2つのサイドバーにて管理することができます。外部スタイルシートが両方のサイドバーに表示されている場合、あるサイドバーにて行われた変更は、自動的に他のサイドバーにも反映されます。

 

外部 CSS スタイルシート SPS に追加する

以下の操作により外部 CSS スタイルシートを SPS へ割り当てる事ができます:

 

1.デザインビューにてスタイルリポジトリウィンドウにある外部アイテムを選択します(以下のスクリーンショットを参照)。

 

WinStyleRep_ExternalAdd

 

2.スタイルリポジトリツールバーの左側にある追加ボタンをクリックします(上のスクリーンショットを参照)
3.ファイルを開くダイアログが表示されるので、目的の CSS ファイルを選択し開くボタンをクリックします。CSS ファイルが外部アイテム以下に追加されます(以下にある表示を参照ください)。
4.ステップ1から3を繰り返すことで、別の外部 CSS スタイルシートを追加することができます。それらの CSS スタイルシートは外部アイテムの、それまでに追加された外部 CSS スタイルシート以下に追加されます。

 

メモ:デザイン概要 サイドバーからも外部 CSS スタイルシートを追加することができます。

 

外部 CSS スタイルシートの確認と修正

外部 CSS スタイルシートのツリーは以下のように構成されます(以下にあるスクリーンショットも参照ください):

 

 - CSS-1.css  (マウスオーバーによりファイルの位置が表示されます)

   - Media (スタイルリポジトリウィンドウにて定義することができます)

   - Rules (そのまま編集することはできず、CSS ファイル内部で編集を行う必要があります)

     - Selector-1

       - Property-1

       - ...

       - Property-N

     - ...

     - Selector-N

 + ...

 + CSS-N.css        

 

スタイルリポジトリウィンドウでは、そのスタイルシートが適用されるメディアを編集することができます。アイテムの右側にある矢印アイコンをクリックして、ドロップダウンリストから目的のメディアを選択してください。外部 CSS スタイルシートに定義されたルールがスタイルリポジトリウィンドウに表示されますが、編集することはできません。各アイテムの左にある + および - シンボルをクリックすることで、ツリー内部にあるセレクターアイテムを展開/縮退することができます(以下のスクリーンショットを参照)。

 

外部スタイルシートを削除するには、スタイルシートが選択された状態でスタイルリポジトリツールバーにあるリセットボタンをクリックしてください。

 

WinStyleRep_ExternalMultiple

 

外部 CSS スタイルシートの優先順位を変更する

スタイルリポジトリウィンドウにて割り当てられた外部 CSS スタイルシートは、@import 命令により HTML 出力ファイルへインポートされます。HTML ファイルでは以下のような記述がなされます:

 

<html>

 <head>

         <style>

                 <!--

                 @import url("ExternalCSS-1.css");

                 @import url("ExternalCSS-2.css")screen;

                 @import url("ExternalCSS-3.css")print;  

                 -->

         </style>

 </head>

 <body/>

</html>

 

HTML ファイルにて表示されるファイルの順序は、スタイルリポジトリの外部ツリー以下ならびにデザイン概要サイドバーの CSS ファイルツリー以下に表示されている順序に従います。スタイルリポジトリにて CSS ファイルの順序を変更するには、優先順位を変更するスタイルシートを選択し、スタイルリポジトリツールバーにある上へ BtnMoveUp ボタンまたは下へ BtnMoveDown ボタンを使用することで、ツリーにおけるスタイルシートの位置(優先順位)を変更してください。デザイン概要サイドバーでは CSS スタイルシートの編集ボタンをクリックして、必要に応じて上へまたは下へコマンドを選択することができます。

 

重要: 最も下に表示されているスタイルシートが最も高いインポート優先度を持ち、表示されている順序が上がるにつれてスタイルシートのインポート優先度が下がることに注意してください。上に示されている例のインポート優先度は (1) ExternalCSS-3.css、(2) ExternalCSS-2.css、(3) ExternalCSS-1.css の順で高くなります。異なるスタイルシートにて定義された2つの CSS ルールが同じセレクターを持っている場合、より高いインポート優先順位のスタイルシートにあるルールが適用されます。

 

すべての CSS ファイルと単一の CSS ファイルを切り替える

(i) 全ての CSS ファイルにあるルールをカスケードルールの優先順位に従い適用する他にも、(ii) 選択された CSS ファイルのルールだけを適用することができます。このオプションはデザイン概要サイドバーから選択することができます(以下のスクリーンショットを参照)。表示されている CSS ファイルの編集ボタンをクリックして、全ての CSS ファイルからスタイルを混合コマンド、または XPath で CSS ファイルを選択コマンドを選択してください。このオプションはスタイルリポジトリウィンドウでも使用することができます。

 

CSSSwitchingMenu

 

XPath で CSS ファイルを選択コマンドをクリックした場合、XPath 条件式を入力するためのダイアログが表示されます(以下のスクリーンショットを参照)。ダイアログ上部のペインに表示されているとおりに、SPS 内にある CSS ファイルのどれかを評価する XPath 条件式を入力する必要があります。ファイル名を文字列として入力する場合、その他全ての XPath 条件式と同様に、文字列をシングルクォートにより囲まなければならない点に注意してください。

全ての CSS ファイルにあるスタイルルールが使用される場合 : Authentic ならびに HTML 出力の場合、選択された CSS ファイルにある全てのルールが、ルールをサポートする全てのデザインコンポーネントに対して適用されます。 では、非クラスセレクタールールだけが、優先順位に従うかたちで全ての CSS ファイルから適用されます。

 

 


(C) 2019 Altova GmbH