CSS スタイルと作業

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

ホーム >  SPS ファイル: 表示方法 >

CSS スタイルと作業

SPS ドキュメントのスタイルは CSS ルールによりデザインされます。スタイルルールは以下のように指定することができます:

 

外部 CSS スタイルシートにて: デザイン概要 サイドバーと スタイルレポジトリ サイドバーから外部 CSS スタイルシートを追加することができます。
グローバルスタイル にて: SPS の内部ならびにその開始部分で定義が行われます(HTML 出力では、これらグローバルスタイルが head 要素内にある style 子要素にて定義されます)。グローバルスタイルはスタイルリポジトリサイドバーにて定義されます。
ドキュメントにある個々のコンポーネントに対してローカルで: HTML 出力では、これらのルールが個々の HTML 要素内にある style 属性にて定義されます。ローカルのスタイルルールは スタイル サイドバーにて定義されます。

 

上記のメカニズムによりスタイルを作成する方法の詳細については、このセクション以下にあるサブセクションにて記述されます。

 

用語解説

CSS スタイルシートは1つ以上のスタイルルールにより構成されます。ルールは以下のように表示されます:

 

 H1 { color: blue }

 

または:

 

 H1 { color: blue;

           margin-top: 16px; }

 

各ルールにはセレクター(上の例における H1)と宣言(color: blue)が含まれます。宣言はプロパティ(例えば color)と値(blue)が含まれます。各プロパティと値のペアのことをスタイル定義と言います。StyleVision では、CSS スタイルを スタイル サイドバー(ローカルスタイル)ならびにスタイルレポジトリサイドバー(グローバルスタイル)にて定義されます。

 

カスケードの順序

CSS ではカスケード順序が適用されます。これにより、評価されるルールの順序は以下のように決定されます:

 

1.宣言場所: 外部スタイルシートの優先度はグローバルスタイルよりも低く、グローバルスタイルの優先度はローカルスタイルよりも低くなります。外部スタイルシートはインポートされたものとして扱われ、後からインポートされたスタイルシートがより高い優先度を持つようになります。
2.詳細性: 同じ要素に対して2つのルールが適用された場合、より詳細なセレクターがより高い優先度を持つようになります。
3.順序: 2つのルールが同じ場所から同じ詳細性を持っている場合、スタイルシートの後の方に出現するルールがより高い優先度を持つようになります。スタイルシートがインポートされる場合、インポート元スタイルシートの前に来るものとして処理されます。

 

モジュール SPS における CSS スタイル

SPS モジュールが別の SPSへ追加された場合、参照元の SPS にある CSS スタイルが、追加されたモジュール内のスタイルよりも高い優先度を持つようになります。複数のモジュールが追加された場合、これらモジュール内にある CSS スタイルのうち、より下部にあるスタイルが高い優先度を持つようになります。モジュール SPS に関する情報については モジュール SPS のセクションを参照ください。

 

CSS サポートin Internet Explorer

IE 6.0 より前の Internet Explorer (IE) では、IE 6.0 以降とは異なる CSS ルールの解釈が行われます。従って、デザイナーにとって、どのバージョンの IE に対してデザインを行うのかが重要になります。6.0 以降の IE では新旧両方の解釈を行うことができ、新しいバージョンにて過去の解釈を行うこともできます。IE 6.0 以降で使用される解釈方法は HTML ドキュメントコード内部で指定することができます。 SPS では、 指定 により HTML 出力ドキュメントのスタイルを、 Internet Explorer の古い/新しい解釈 によりデザインすることができます。選択された解釈方法に従うかたちで CSS スタイルを定義することができます。詳細については: プロパティ: CSS サポートを参照ください。

 

 

メモ:CSS の仕様に関する詳細については、 http://www.w3.org/TR/REC-CSS2/ を参照ください。

 

 

 


(C) 2019 Altova GmbH