--- title: "スタイルビジョンデザインにおいて、CSSファイルを動的に選択することで、より効果的なデザインを実現できます" date: "2012-01-10" description: StyleVisionのデザインを、入力条件に基づいてCSSファイルを動的に選択することで、多様な状況に対応した効率的なフォーマットを実現する方法をご紹介します。 --- Status: #blog Tags: Categories: [Altova](/blog/ja/category/altova.md) # スタイルビジョンデザインにおいて、CSSファイルを動的に選択することで、より効果的なデザインを実現できます StyleVisionの優れた点のひとつは、その柔軟性です。StyleVisionを使用すると、HTML、PDF、そしてAuthentic電子フォームなど、複数の形式に対応した、視覚的に洗練されたスタイルシートやレポートを[作成できます](https://www.altova.com/ja/stylevision.html)。さらに、StyleVisionは、CSSファイルの動的な選択機能を新しく導入し[（StyleVision 2012で提供開始）](https://www.altova.com/ja/whatsnew.html)、これにより、単一のデザインで多様なフォーマット要件に対応することが、これまで以上に容易になりました。 StyleVisionのデザイン自体から、ほとんどの書式設定作業は引き続き行うことができますが、CSSファイルの動的な選択により、複数の状況で利用できる単一のテンプレートを作成することが可能です。具体例として、架空の企業であるNanonull Corporation向けの請求書を作成しました。この請求書のデザインは、請求書の発行日と支払期日の間の経過日数によって変化します。各要素の書式設定を、経過日数のに基づいてXPathで変更することも可能でしたが、今回は、異なる状況に対応する個別のCSSファイルを作成する方が効率的です。 [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) 以下は、StyleVisionで作成した請求書のサンプルです。太字の項目名以外は、ほとんど書式設定が施されていません。請求書発行日と支払期日の間の経過日数に応じて、CSSファイルを使用して書式設定を適用します。 [![](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png)](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png) これで、Altova社のXMLSpyを使って、CSSファイルを作成することができます [XMLエディタ](https://www.altova.com/ja/xml-editor/) CSS2およびCSS3の編集機能を統合的にサポートしています。 まず、請求書の発行日以降の支払期日を持つ請求書（つまり、支払いが遅れていない請求書）用のCSSファイルを作成します。ここでは、単に、黄みがかった背景色、Nanonullのロゴ、およびヘッダー用のクラスをbodyセレクタに設定しました。 [![](https://4.bp.blogspot.com/-mbndpc9C_QA/TwtfdWUSlxI/AAAAAAAAAOI/uTo7_WMRFIs/s1600/XMLSpyCssRegular.png)](https://4.bp.blogspot.com/-mbndpc9C_QA/TwtfdWUSlxI/AAAAAAAAAOI/uTo7_WMRFIs/s1600/XMLSpyCssRegular.png) それでは、期日超過の請求書に対して、より詳細なCSSを作成します。bodyセレクタには期日超過を示す画像を表示し、paragraphセレクタには20ポイントの太字で赤色のフォントを使用し、headerとsmall headerのクラスには、異なるサイズの太字で赤色のフォントを使用します。 [![](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png) これで、CSSファイルをStyleVisionのデザインに適用し、さらに、さまざまなデザイン要素にクラスを割り当てることができます。 StyleVisionでは、デザイン概要画面で「新しいCSSファイルを追加」をクリックし、XMLSpyで作成したCSSファイルを選択します。StyleVisionは、同じデザイン内で複数のCSSファイルをサポートしています。 現在のデザインは以下のようになっています。StyleVisionのデザインビューでは、CSSRegularとCSSOverdueの両方のスタイルが適用されていることにご注目ください。 [![](https://3.bp.blogspot.com/-Ul1kecAW_u0/TwtgdHO1BVI/AAAAAAAAAOY/5JlWVZTwldo/s1600/SVInvoicewithCSS.png)](https://3.bp.blogspot.com/-Ul1kecAW_u0/TwtgdHO1BVI/AAAAAAAAAOY/5JlWVZTwldo/s1600/SVInvoicewithCSS.png) しかし、今回は請求書の発行日と支払期日の間の距離に基づいてCSSファイルを割り当てたいと考えています。そのため、デザイン概要画面で、CSSファイル名の横にある矢印を右クリックし、「XPathを使用して1つのCSSファイルを選択」を選択します（以下）。 [![](https://1.bp.blogspot.com/-8HF6dn-DWoQ/TwtgpySS8RI/AAAAAAAAAOg/MR85xsCfxks/s1600/SelectOneCSS.png)](https://1.bp.blogspot.com/-8HF6dn-DWoQ/TwtgpySS8RI/AAAAAAAAAOg/MR85xsCfxks/s1600/SelectOneCSS.png) これにより、「XPathを使用したCSSファイル選択」ダイアログボックス（以下参照）が表示されます。このダイアログボックスでは、XPathを使用して、動的な入力に基づいて適切なCSSファイルを指定できます。ここでは、StyleVisionに対して、請求書の期日が請求書の発行日よりも前に来る場合は「CSSOverdue.css」ファイルを使用し、それ以外の場合は「CSSRegular.css」ファイルを使用するように指示しています。 [![](https://2.bp.blogspot.com/-HJJmqC87QSs/Twtg7ad728I/AAAAAAAAAOo/TmzbdKUP4_Y/s1600/SelectCSSdialog.png)](https://2.bp.blogspot.com/-HJJmqC87QSs/Twtg7ad728I/AAAAAAAAAOo/TmzbdKUP4_Y/s1600/SelectCSSdialog.png) 上記で「XPathを使用したCSSファイルを選択」ダイアログボックスに入力した、完全なXPath式がここに示されています。 [![](https://3.bp.blogspot.com/-wdZ5ui3cD-w/TwthFjH8e0I/AAAAAAAAAOw/aI3IE6NvJMQ/s1600/XPathSelectCSS.png)](https://3.bp.blogspot.com/-wdZ5ui3cD-w/TwthFjH8e0I/AAAAAAAAAOw/aI3IE6NvJMQ/s1600/XPathSelectCSS.png) これで、CSSファイルで定義されたクラスを、StyleVisionのデザインにおける個々のデザイン要素に割り当てることができます。 ここでは、テキスト「Invoice（請求書）」を含む段落を、スタイルウィンドウの「ヘッダー」というクラスに割り当てています。CSSファイルの内容に基づき、期日超過の請求書にはこのテキストが赤色の20ポイントの太字で表示され、期日以降の請求書には黒色の20ポイントの太字で表示されます。 [![](https://2.bp.blogspot.com/-RMtcQErqtU4/TwthWWeZRoI/AAAAAAAAAO4/jU-LSJfyNCw/s1600/SVAssignClass.png)](https://2.bp.blogspot.com/-RMtcQErqtU4/TwthWWeZRoI/AAAAAAAAAO4/jU-LSJfyNCw/s1600/SVAssignClass.png) 同様に、請求書の支払期日を「小見出し」というクラスに割り当てます それでは、請求書のプレビューを表示する準備ができました。 以下は、支払期限が過ぎた請求書のHTMLプレビューです。注意点として、「請求書」というテキストと支払期限が赤字の太字で表示されており、また、請求書の中央に「支払期限超過」という画像が印字されています。 [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) それでは、期日が未来の日付になっている同じ請求書を見てみましょう。黄色の背景、Nanonullのロゴ、そして「請求書」という文字と期日が黒色で表示されていることに注目してください。 [![](https://3.bp.blogspot.com/-g_Lak8SS2do/Twthzrq1LXI/AAAAAAAAAPA/augs6gYDtvY/s1600/SVInvoiceRegular.png)](https://3.bp.blogspot.com/-g_Lak8SS2do/Twthzrq1LXI/AAAAAAAAAPA/augs6gYDtvY/s1600/SVInvoiceRegular.png) 動的な入力に基づいてCSSファイルを指定できる機能は、様々な可能性を広げ、StyleVisionのデザインをさらに柔軟にします。この機能を使用することで、デザインに関連付けられたCSSファイルを介して、リアルタイムでフォーマットの変更を行うことができ、特に多くの要素を含むデザインにおいて非常に便利です。 StyleVisionのスタイルシートおよびレポートデザイナー、またはAltovaのその他のツールを使用して素晴らしいプロジェクトを作成された方、ぜひその成果を共有してください。このブログ記事にコメントして、他のAltovaユーザーの方々とあなたの経験を共有していただければ幸いです。 もし、お客様の事例が素晴らしいケーススタディになる可能性があるとお考えでしたら、[Altovaの事例紹介](https://www.altova.com/ja/case-studies.html)ページをご覧ください。お客様の事例を掲載させていただいた場合、200ドルのAmazonギフトカードをプレゼントいたします。ぜひ、お気軽にお知らせください。