グローバルスタイル

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

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

グローバルスタイル

グローバルスタイルは SPS デザイン全体に対して適用されます。スタイルリポジトリはスタイルリポジトリのグローバル以下に表示されます。これらのスタイルは、 CSS ルールとして  HTML 出力へ渡されます。 HTML ドキュメントでは、これらの CSS ルールが /html/head/style 要素内に記述されます。

 

スタイルリポジトリでは、セレクターとそのセレクターに対応する CSS プロパティから構成される CSS がグローバルスタイルとなります。以下の2つのステップによりスタイルを作成することができます:

 

新たなスタイルを追加して、それに対する CSS セレクターを宣言する
そのセレクターに対する CSS プロパティを定義する

 

サポートされるセレクター

次の セレクター がサポートされます:

 

ユニバーサルセレクター* により示されます。
型セレクターh1 といった要素名を対象にします。
属性セレクター[class=maindoc] といった属性を対象にします。
クラスセレクター : 例: .maindoc
ID セレクター : 例: #header

 

グローバルなスタイルを追加する

以下の操作によりグローバルスタイルを SPS デザインへ追加することができます:

 

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

 

WinStyleRep_GlobalAdd

 

2.スタイルリポジトリツールバーの左にある追加ボタンをクリックします。(全ての HTML 要素が選択される) * セレクターを伴うグローバルスタイルが、グローバルツリー内に挿入されます。新たに挿入されたグローバルスタイルのデフォルトセレクターにはユニバーサルセレクターが使用されます。
3.セレクターをダブルクリックすることで、デフォルトのユニバーサルセレクターを変更することができます。

 

WinStyleRep_GlobalSelector

 

4.セレクターに対して CSS プロパティをセットします。プロパティをセットする方法については、 スタイルの値の設定セクションを参照ください。
5.セレクターに対して CSS プロパティをセットします。プロパティをセットする方法については、

 

メモ:

 

スタイルリポジトリウィンドウにある挿入ボタンをクリックすることで、グローバルツリーにて選択されているグローバルスタイルの前に新たなグローバルスタイルを挿入することもできます。追加ならびに挿入コマンドは、グローバルセレクターを右クリックすることでも選択することができます。
グローバルツリー内にあるアイテムを右クリックして、「セレクターを追加 | HTML | HTML の要素名」を選択することで、HTML 要素に対するグローバルスタイルのセレクターを挿入追加することができます。

 

グローバルスタイルの編集と削除

スタイルセレクターとそのプロパティは、スタイルリポジトリウィンドウにて編集することができます。

 

セレクターを編集するには、セレクター名をダブルクリックしてテキストフィールドにて編集を行います。
スタイルにおけるプロパティ値の定義と編集については、 スタイルの値の設定を参照ください。スタイルには3種類の表示方法があり、それらのビューと、ビューの切り替えについては 定義ビューのセクションを参照ください。

 

グローバルスタイルを削除するには、そのスタイルを選択して、スタイルリポジトリツールバーにあるリセットボタンをクリックしてください。

 

グローバルスタイルの優先順位を変更する

スタイルリポジトリウィンドウにて割り当てられたグローバルスタイルは、CSS ルールとして /html/head/style 要素内に配置されます。HTML ファイルでは、これらのルールは以下のように表示されます:

 

<html>

 <head>

         <style>

                 <!--

                 h1                { color:blue;

                                   font-size:16pt;

                                 }

                 h2                { color:blue;

                                   font-size:14pt;

                                 }

                 .red        { color:red;}

                 .green        { color:green;}

                 .green        { color:lime;}

                 -->

         </style>

 </head>

 <body/>

</html>

 

グローバルスタイルが Authentic View ならびに HTML ドキュメントにて表示される順序は、スタイルリポジトリのグローバルツリーにて表示される順序に対応します。 Authentic View ドキュメントにおける順序には意味があり、2つのセレクターにより同じノードが選択される場合、より下部に表示されているセレクターが、より高い優先順位を持つことになります。例えば、上記のルールが HTML ドキュメントに表示されており、HTML ドキュメント内に <h1 class="green"> という要素と、3つのグローバルスタイル がこの要素に一致する場合: h1 セレクター と2つの .green クラスセレクターを持つ場合。 色 green を持つ.green セレクターの後に発生し、優先順位を与えられるため、and色 lime を持つ .green セレクターのプロパティが適用されます。 (クラス セレクターはノードセレクターよりも高い優先順序が与えられるため、 .green セレクターには、 h1 セレクターに対する位置に関わらず、 h1 セレクターよりも高い優先順位が与えられます)。 h1 スタイルのフォントサイズは、しかしながら、 <h1> 要素 に一致する高い優先順位を有し、フォントサイズプロパティを有するセレクターが存在しないため、 <h1> 要素に適用されます。

 

グローバルスタイルの優先順位を変更するには、そのスタイルが選択された状態で、スタイルリポジトリツールバーにある上へならびに下へボタンを使用します。例えば、 .green グローバルスタイルが .red  スタイルの前に移動されると、.red スタイルの色のプロパティは、 .green スタイルのプロパティよりも高い優先度を持つようになります。

 

クラスセレクターは型のセレクターよりも常に優先されることに注意してください。

つまり、セレクターの順序が .red  .green  h1  h2 に変更されると、 h1h2 は、 green のままです。

 

 

 


(C) 2019 Altova GmbH