コンテンツのフォーマット

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

ホーム >  クイックスタートチュートリアル >

コンテンツのフォーマット

StyleVision には、CSS をベースにしたパワフルで柔軟性に富んだ スタイルメカニズム が用意されており、デザイン内にあるコンポーネントのフォーマットに使用することができます。StyleVision に搭載されたスタイルメカニズムの重要な点を以下に示します:

 

CSS スタイルルールをブロックコンポーネントならびにインラインコンポーネントに対して定義することができます。
定義済みのフォーマット とは承継されるスタイルを含むブロックコンポーネントのことで、コンポーネントのグループに対するラッパーとして使用されます。これら定義済みフォーマットの継承されたスタイルは、各コンポーネントに対してローカルでスタイルを指定することにより、オーバーライドすることができます。これは CSS のカスケード処理に従ったものです。
デザインではコンポーネントに対するクラス属性を宣言することができ、 外部 または グローバル スタイルルールのセレクターとしてクラスを使用することができます。
スタイルの指定は3つのレベルで行うことができます。優先順位の低いものから、(i) 外部スタイルシート、 (ii) グローバルスタイルルール、 と (iii) ローカルスタイルルールとなります。

 

このセクションでは、以下のことがらを学習します:

 

定義済みのフォーマットを割り当てる
コンポーネントにクラス属性を割り当てる
外部 CSS スタイルシートにてスタイルを定義して そのスタイルシートを SPS のスタイルリポジトリへ追加する
グローバルスタイルルールを定義する
選択された複数デザインコンポーネントに対してローカルスタイル を定義する
単一のコンポーネントに対してローカルスタイル を定義する。

 

定義済みのフォーマットを割り当てる

定義済みのフォーマット を割り当てることで 定義済みのフォーマットのスタイルを、継承というかたちでコンポーネントへ与えることができます。デザインにおいて headline 要素を選択し、メニューオプションから「タグで囲む | 特殊な段落 | 見出し3 (h3)」を選択します。定義済みのフォーマットタグが headline 要素の周りに作成されます (下のスクリーンショット)。

 

TutQS_DesView_PredefFormats_headline

 

コンテンツのフォントプロパティが変化して、定義済みフォーマットの上と下に空白が追加されます。プロパティ値は h3 定義済みフォーマットから継承されます。

 

定義済みのフォーマットを使用することで、ブロック内にあるコンポーネントをグループとしてデザインし、それらコンポーネントをブロックやグループとしてフォーマットすることができます。この中でも特に div フォーマットを使用することで、空白なしのブロックを作成することができます。デザインにて newsitemdatelinesynopsis、そして source ノードに div コンポーネントを割り当てます。デザインは以下にあるスクリーンショットのようになります。静的テキストの "Source: " が source 要素を含む div コンポーネント内に含まれるようになり、newsitem 要素全体が div コンポーネント内に含まれます。

 

TutQS_DesView_PredefFormats_newsitems

 

div ブロック内とともに、コンポーネントがグループ化されました。このセクションの終盤 では、グループ化されたコンポーネントのブロックに対してスタイルの割り当てを行います。

 

コンポーネントをクラス属性に割り当てる

スタイルはコンポーネントのクラスに対して定義することができます。例えば、全てのヘッダーに対して(フォントファミリーや色といった)共通したプロパティを定義することができます。定義を行うには、(i) 共通したプロパティを含んだコンポーネントを割り当て、(ii) そのクラスに対してスタイルプロパティを割り当てる、という操作を行う必要があります。

 

デザインにて h3 タグを選択し、スタイルサイドバーにて 1 段落を選択することで、共通プロパティグループを選択します。共通プロパティグループを展開している状態で、class プロパティの値フィールドをダブルクリックして、header という値を入力します。

 

TutQS_Styles_Class

 

h3 フォーマットのインスタンスが header という名前のクラスへ割り当てられます。header クラスに対してスタイルプロパティを定義した場合、これらのプロパティが header クラスを持っている SPS 内の全てのコンポーネントに対して適用されます。

 

外部 CSS スタイルシートをスタイルレポジトリへ追加する

外部 CSS スタイルシート内にあるスタイルルールは SPS デザイン内にあるコンポーネントへ適用することができます。外部スタイルシートのルールをコンポーネントに対して適用するためには、スタイルシートをスタイルリポジトリへ追加することができます。 スタイルレポジトリ サイドバー (デザインビュー内の),にて、以下のような操作を行います:

 

1.外部アイテムを選択します。
2.スタイルレポジトリ サイドバー のツールバーにある追加ボタンをクリックします。ファイルを開くダイアログが表示されます。
3.(マイ) ドキュメントフォルダー以下にある C:\Documents and Settings\<username>\My Documents\Altova\StyleVision2019\StyleVisionExamples\チュートリアル\QuickStart\QuickStart.css を開きます。

 

スタイルシートがスタイルリポジトリへ追加されます。この段階で関連する記述を以下に示します:

 

 .header        {

                          font-family: "Arial", sans-serif;

                          font-weight: bold;

                          color: red;

                         }

 

 h3                        {

                          font-size: 12pt;

                         }

 

header クラスと h3 要素のスタイルルールを組み合わせることで、以下の HTML 出力が headline 要素に対して作成されます。

 

TutQS_HTML_headlineStyle

 

グローバルスタイル ルールを定義する

CSS セレクターを使用することで、グローバルスタイルルール を SPS 全体に対して定義することができます。ルールは スタイルレポジトリ サイドバー内で直接定義します。header クラスに対して、以下のようにグローバルスタイルルールを作成します:

 

1.デザインビュー がアクティブになっている状態で、 スタイルレポジトリ サイドバー 内のグローバルアイテムを選択します。
2.ツールバーの追加ボタンをクリックします。この操作により、ワイルドカードセレクター (*) に対して空のルールが作成されます。
3.ワイルドカードの代わりに .header と入力して、セレクターを置き換えます。
4.プロパティの color を展開して、color プロパティ値のドロップダウンリストから green を選択します(以下のスクリーンショットを参照)。

 

TutQS_StyleRep_header

 

外部スタイルシートでも定義されているプロパティに対してグローバルスタイルルールの定義を行うと、グローバルルールのプロパティ値が優先的に使用されます。そのため、以下の HTML プレビューではヘッドラインのコンテンツが緑色で表示されます。外部スタイルシートにて定義されたその他のプロパティは、(グローバルルールにより上書きされることなく)そのまま使用されます(この例では、font-familyfont-weight)。

 

TutQS_HTML_headlineStyleGlobal

 

複数のコンポーネントに対してローカルスタイルを定義する

複数のコンポーネントに対してローカルスタイルを同時に定義することができます。作成中のデザインにて、ニュースアイテムのテキスト全体に Arial フォントを使用したい場合、newsitem 要素を囲んでいる div コンポーネントをクリックして、 スタイル サイドバーのスタイルカラムにて、「1 段落」を選択し、プロパティのフォントグループ内にある font-family に Arial を選択します。この操作により、それから派生した形式全てが影響をうけることになります。

 

デザインにて、datelinesynopsissource ノードを囲んでいる3つの div コンポーネントを(Shift キーを押下した状態で各 div コンポーネントをクリックすることで)選択します。 スタイル サイドバー にて「3 段落」を選択し、プロパティのフォントグループにて、font-size を 10pt に指定します(h3 コンポーネントは必須項目の font-size 12pt となっているため、選択されませんでした)。

 

のスタイルカラムにて「1 段落」を選択します。プロパティのフォントグループにて、font-weightbold にセットして、font-styleitalic に指定します。プロパティの色グループにて、colorgray に指定します。dateline の出力は以下のようになります: スタイル サイドバー のスタイルカラムにて「1 段落」を選択します。プロパティのフォントグループにて、font-weightbold にセットして、font-styleitalic に指定します。プロパティの色グループにて、colorgray に指定します。dateline の出力は以下のようになります:

 

 

TutQS_HTML_DatelineStyled

 

div コンポーネントに対して定義されたスタイルが、div コンポーネント内にある静的なテキストに対しても適用されます。

 

単一のコンポーネントに対してローカルスタイルを定義する

単一のコンポーネントに対して定義されたローカルスタイルは、SPS 内で定義されたより高次のコンポーネントをオーバーライドします。デザインにて headline 要素を選択し、(スタイルプロパティの色グループ内にある color プロパティに対して)navy 色を割り当てます。ローカルで定義されたプロパティ (color:navy) により、.header クラスに対して定義されたグローバルスタイル (color:green) がオーバーライドされます。

 

source 要素を囲んでいる div コンポーネントを選択します。 スタイル サイドバー にて「1 段落」アイテムを選択し、(スタイルプロパティの色グループにある)color プロパティにて gray をセットします。スタイルプロパティのフォントグループにて font-weight の値を bold へ変更します。これらの値は静的なテキストに対して適用されます。前のセクションにて、font-styleitalic が静的テキストの "Source:" に対して適用されたのを思い出してください。新たなプロパティ(font-weight:boldcolor:gray)が font-style:italic プロパティとは別に追加されます。

 

デザインビューにて source 要素の(コンテンツ)プレースホルダを選択します。スタイルカラムにて「1 コンテンツ」を選択し、(スタイルプロパティの色グループにある)color プロパティに black をセットします。その後、プロパティのフォントグループにある font-weight に対して normal を選択します。新たなプロパティが source 要素のノードに対応したコンテンツプレースホルダノードに適用され、

div コンポーネントに対して定義されたプロパティがオーバーライドされます(以下のスクリーンショットを参照)。

 

フォーマットを完成する

このセクションにてフォーマットを完成させるにあたり、synopsis 要素の div コンポーネントを選択し、ツールバーの 定義済みのフォーマット コンボボックスにて p を選択します。この操作により HTML の p 要素のスタイルがブロックに対して適用されます。HTML プレビューは以下のようになります:

 

TutQS_HTML_StylesDone

 

操作が完了した後に、ファイルを保存してください。

 

 

 


(C) 2019 Altova GmbH