---
title: "ウェブページの作成：StyleVisionによるHTMLデザイン"
date: "2012-03-13"
categories:
- "applications"
tags:
- "html"
- "stylevision"
- "web-design"
description: HTMLとStyleVisionを使用して、動的なウェブページをどのように設計するかを学びましょう。XMLコンテンツを活用することで、効率的な更新と高度なフォーマット機能を実現できます。
---
Status: #blog
Tags: #html #stylevision #web-design
Categories: [development](/blog/ja/category/development.md)
# ウェブページの作成：StyleVisionによるHTMLデザイン
現代のビジネス環境は変化が激しく、情報だけでなく、その情報が求められる形式も頻繁に変わります。ウェブページの中には、内容がそれほど変わらないものもあります（例えば、会社概要やアクセスに関するページなど）。しかし、今日の企業のウェブサイトの大部分は、常に新しいデータで更新されています。そのため、多くの組織がウェブコンテンツをXML形式で保存することを選択しています。これにより、組織は非常に効率的にコンテンツを開発できます。なぜなら、XMLファイルに含まれる情報は、複数の目的や複数の出力形式で利用できるからです。XMLファイルに関連付けられたXMLスキーマは、コンテンツの構造を記述しています。StyleVisionは、XMLを活用するのに役立つ、強力なスタイルシートおよびレポートデザイナーです。StyleVisionを使用すると、テンプレートベースで、ドラッグ＆ドロップ操作で、洗練されたフォーマットのウェブページを[作成できます](https://www.altova.com/ja/stylevision/web-design.html)。StyleVisionは[XSLTスタイルシートを自動生成するため](https://www.altova.com/ja/stylevision/xslt-html.html)、作成したデザインを新しいウェブサイトや既存のウェブサイトに統合できます。さらに、ファイルメニューから直接、ASPXウェブアプリケーションを生成することも可能です。
[](http://lh6.ggpht.com/-H-qFnpImHnA/TzEYFD10sbI/AAAAAAAAAWw/xd9kXGKp02g/s1600-h/clip_image001%25255B6%25255D.png)
この投稿では、StyleVisionのHTMLフォーマット機能をいくつか紹介するウェブページを作成します。StyleVisionには、簡単なドラッグ＆ドロップ操作で洗練されたデザインを作成できる機能が組み込まれていますが、今回はその機能を使用せずに、別の方法で作成します [CSS3](https://www.altova.com/ja/stylevision/xslt-css.html), 画像やその他の標準的なデザイン要素を活用し、コンテンツの変更があってもレイアウトを再調整する必要がないウェブページを作成します。
弊社の初期のStyleVisionデザインは、非常にシンプルなものでした。
以下に示すスキーマツリーのウィンドウでご覧のとおり、このXMLスキーマは、XMLを書籍形式で公開できるように設計されており、概要、章のタイトル、章の小見出し、そして本文が含まれています。私たちは、これらのセクションに対応する要素を、単にデザインウィンドウにドラッグ＆ドロップしただけです。
[](http://lh4.ggpht.com/-ObHzvln3T2M/TzEYF4WfRQI/AAAAAAAAAXA/jiNhGNHKSlQ/s1600-h/clip_image002%25255B4%25255D.gif)
以下に示すように、XMLの内容は適切に表示されています。しかも、それを実現するために、私たちは手作業でXSLTやHTMLを記述する必要はありませんでした。しかし、ウェブページとして公開する前に、デザインを調整する必要があります。
[](http://lh6.ggpht.com/-hLYoSfNTqwY/TzEYGl2298I/AAAAAAAAAXQ/U_mqgmdH5aI/s1600-h/clip_image003%25255B4%25255D.png)
スタイルビジョンインターフェースでは、ほとんどのデザイン要素を「スタイル」や「プロパティ」のパネルで調整できますが、今回はCSSファイルを使用して書式設定を行います。そうすることで、書式設定を変更したい場合に、デザイン自体を変更するのではなく、XSLTファイル内で新しいCSSファイルを指定するだけで済みます。
当社では、Altova社のXMLSpyを使用します [XMLエディタ](https://www.altova.com/ja/xml-editor/) 統合されたCSS2およびCSS3の編集・作成機能を備え、それらを使用してCSSを作成します。
以下に示されたスクリーンショットは、XMLSpyで作成したCSSファイルの抜粋であり、h1、h2、およびh3の見出しに関するプロパティが含まれています。これらの要素は、このCSSファイル内で定義します。その後、StyleVisionで、これらの定義をXMLファイル内の要素に適用します。
ご留意ください。ここでは、h1要素にCSS3のbox-shadowプロパティ、h3要素にbox-sizingプロパティを適用しています。XMLSpyとStyleVisionはどちらもHTML5とCSS3に対応しています。
[](http://lh3.ggpht.com/-puzAVL_C0GQ/TzEYHbGkKeI/AAAAAAAAAXg/Jbs-r3id3Pk/s1600-h/clip_image004%25255B4%25255D.png)
CSSファイルを作成したら、StyleVisionに戻り、作成したデザインにそれを適用します。StyleVisionのデザインにCSSファイルを適用するには、単に以下のボタンをクリックします _新しいCSSファイルを追加する_ デザイン概要のリンクからファイルにアクセスしてください。
[](http://lh5.ggpht.com/-wP6AoGdp1oE/TzEYH5gIuBI/AAAAAAAAAXw/ML0VQuOItJg/s1600-h/clip_image005%25255B4%25255D.png)
StyleVisionのデザインは、複数のCSSファイルをサポートできることにご注意ください。先日、ブログでStyleVisionのデザインにCSSファイルを動的に割り当てる方法についてご紹介しました。[今度は、作成したCSSファイル内のセレクタを、デザイン内の要素に割り当てていきます。](https://www.altova.com/blog/2012/01/get-more-mileage-from-your-stylevision.html) まずは、章のタイトルから始めましょう。章のタイトル要素に対応するコンテンツプレースホルダーを選択し、メニューバーにあるドロップダウンボックスから「h1」を選択します。
[](http://lh6.ggpht.com/-qW-eWAXrfac/TzEYIVYLIJI/AAAAAAAAAYA/nqSArbWHaNs/s1600-h/clip_image006%25255B4%25255D.png)
CSSファイルの中で、h1要素のフォント、フォントサイズ、色、および配置を定義しました。また、CSS3のボックスシャドウプロパティも使用しました。
以下に、h1セレクタが章のタイトル要素に適用された、当社のデザインのHTMLコードの表示を示します。
[](http://lh3.ggpht.com/-4r3Bf4jTBTI/TzEYI-jibcI/AAAAAAAAAYQ/4vf9KOnSFlA/s1600-h/clip_image007%25255B4%25255D.png)
同様に、概要部分と章の小見出し要素には、それぞれ「h2」と「h3」のセレクタを割り当てます。現在のデザインは以下のようになります。
[](http://lh3.ggpht.com/-BXquuuPNhaM/TzEYJeCEmMI/AAAAAAAAAYc/LfjSNsvaJ_s/s1600-h/clip_image008%25255B4%25255D.gif)
以下にHTMLの表示結果を示します。注目すべきは、CSS3の`box-sizing`プロパティを使用して、小見出し（「印象的な出力の作成」と「ビジュアルスタイルシートのデザイン」）を配置し、テキストをそれらの周囲に配置している点です。
[](http://lh5.ggpht.com/-Rhd5pkkvhF0/TzEYLdxCXSI/AAAAAAAAAYw/LcNm6UHAYio/s1600-h/clip_image009%25255B4%25255D.png)
最後に、ソースのXMLファイルにある「coverimage」という属性を使って、ページの下部に画像を追加します（以下に画像を示します）。
[](http://lh5.ggpht.com/-RQANM46r-sw/TzEYNJw_ZxI/AAAAAAAAAZA/TXocXzFmzBY/s1600-h/clip_image010%25255B4%25255D.png)
デザインに画像を追加するには、スキーマツリーから「coverimage」要素をドラッグ＆ドロップでデザインウィンドウに移動し、「画像を作成」を選択します。これにより、「画像の挿入」ダイアログボックスが表示されます。次に、「動的」タブに移動し、「XPathの編集」ボタンをクリックして、スキーマツリーから「cover image」要素を選択します。
以下の場所に、「画像の挿入」ダイアログボックスが表示されます。
[](http://lh5.ggpht.com/-3BYH6D8mYsQ/TzEYNhlJvuI/AAAAAAAAAZQ/_eZIzfhZuhw/s1600-h/clip_image011%25255B4%25255D.png)
また、CSSファイルにCSS3の`border-radius`プロパティを追加し、画像に適用することで、要素の角を丸くすることができます。
以下に、CSSファイルの中で画像フォーマットを定義している部分を示します。この画面はXMLSpyで表示されたものです。
[](http://lh6.ggpht.com/-kqKu3KFbBns/TzEYOJ1ABJI/AAAAAAAAAZg/x1CmD0G_QME/s1600-h/clip_image012%25255B4%25255D.png)
今回使用した書式設定技術に加えて、JavaScript関数、条件付きテンプレート、自動計算など、より高度な機能を追加することも可能ですが、今回の例では、分かりやすさを優先して、シンプルな構成にしています。
弊社のデザインは、いよいよ完成段階に入りました。以下に、HTMLでの表示イメージを示します。
(画像の説明: 画像の内容はテキストで説明されていません。)
デザインに満足したので、ファイルメニューから自動生成されたXSLTスタイルシートを保存することができます。
[](http://lh3.ggpht.com/-P5WjHAVrUb8/TzEYPHCdk5I/AAAAAAAAAaA/Q1iWw8iMi5o/s1600-h/clip_image013%25255B4%25255D.png)
このデザインに基づいて、ASPX形式のWebアプリケーションを生成することも可能です。その場合、「生成されたファイルを保存」のすぐ下の「Webデザイン」オプションを選択します。HTML 4またはHTML 5の出力形式を選択でき、さらに、ファイルメニューからアクセスできるプロパティダイアログで、Internet Explorerとの互換性も設定できます。
[](http://lh6.ggpht.com/-P7Q475fmxgc/TzEYP7OR1jI/AAAAAAAAAaQ/TVxvGxCnIgg/s1600-h/clip_image014%25255B4%25255D.png)
さらに優れた点は、もし元のデータが変更された場合、その変更が自動的にHTMLの出力に反映されることです。
もし、例えば、XMLファイルに新しいコンテンツを追加した場合、そのコンテンツは元のものと同様の形式で表示され、すべてのデザイン要素が適切に配置されます。そのため、HTMLコードの再編集は必要ありません。
ここでは、XMLファイルに新しい章の小見出しを追加し、それに関連するコンテンツも追加しました。そして、その変更をHTMLでプレビューしています。
[](http://lh4.ggpht.com/-dQnw-NixtwY/TzEYQQkBpWI/AAAAAAAAAag/fpm63c9Okeg/s1600-h/clip_image015%25255B4%25255D.png)
ご覧の通り、StyleVisionは両方の利点を兼ね備えています。動的なフォーマット機能を備えた、汎用性の高い単一のHTMLテンプレートを作成できます。StyleVisionが提供する高度なフォーマット制御により、お客様のビジョンを反映したウェブページやASPXアプリケーションをデザインすることができます。