Visual Studio 2010 には Web開発を快適かつ効率よくするための様々な工夫がされています。 また、マイクロソフト独自のWeb技術（ASP.NET）の進歩だけにとどまらず、標準のWeb技術を使った開発においても役に立つ機能が数多く盛り込まれています。 その一つが、今回紹介するスタイルシートの編集機能です。 なお、スタイルシートの編集機能自体はVisual Studio 2008 の頃から存在していましたが、Visual Studio 2010 になって、CSSアウトラインなどの機能強化がされました。 今回は実際にスタイルシートを使った簡単なデモを紹介しますが、これまであまりスタイルシートを使ってこなかったという方も楽に導入していただけるように、基本的なところを含めて紹介したいと思います。 なお、念のため解説しますが、スタイルシートとはHTMLで書かれたWeb ページのデザイン部分のみを定義するファイルです。 HTMLだけでも文字装飾などのデザインは可能ですが、今日のように複雑かつダイナミックなWebページをデザインするうえで、いちいちそのHTMLファイルを編集していたのでは効率が悪いため、現在ではそのデザイン部分をすべてスタイルシートに任せて、HTML側からは <Link href="スタイルシートファイル名" mce_href="スタイルシートファイル名" ...> というようなタグを入れることでそのデザインを反映させるようにしています。 それでは、スタイルシートを含んだWebページの作成を行ってみたいと思います。 まずVisual Studio 2010 を起動し、メニューから File | New | Projects... を選択し、新しいプロジェクトとして 「ASP.NET Empty Web Application」を選択します。VBでもC#でも構いません。 すると以下のように、Webページが全く存在しない、空のWebプロジェクトが生成されます。 まずここに、Webページを追加しましょう。以下のように、プロジェクト名（ここではWebApplication1）を右クリックして、Add | New Item... を選択します。（キーボードではCtrl+Shift+Aです） そして Web Form を選択してダブルクリックして追加します。（HTMLファイルでも構いません） すると、新規に WebForm1.aspx ファイルが追加されます。通常はこのファイルに、Web上で表示させるものを追加したり、機能を追加したりすることでWebプログラムを進めていきます。 ここではWebデザインの実験だけを行いたいので、単純なHTMLタグのみを追加してみます。 以下のように、<body> タグの下に、<h1>タグと<h2>タグを使ったサンプル行を追加します。もちろん表示内容はなんでも構いません。 とりあえずこれで一旦実行してみたいと思います。 ただし、実行する前に、このWebform1.aspxがこのWebサイトの先頭ページであることを指定しておく必要があります。 Solution Explorerの中の、WebForm1.aspxを右クリックして、Set As Start Pageを選択します。 そしてF5キーを押して実行すると、IEが起動して以下のような感じで先ほど追加した<h1>タグと<h2>タグを使ったサンプル行が表示されます。 さて、それではこれらの行を装飾することを考えましょう。 例えばこれらの文字に色を付ける場合、直接<Font color>タグなどを追加すれば実現できます。 しかし、この例のように短いファイルならそれでもいいかも知れませんが、現実には表示情報量が多かったり、いくつものフィルにまたがっていたりする場合の方が、今日では多いように思います。そういう場合は一か所一か所<Font color>タグを挿入していたのでは手間がかかって仕方がありません。 そこで、例えば「<h1>タグで囲まれているものは何も指定しなくても緑色で表示させる」とか、「<Table>タグがあったらそのフチの幅は強制的に○ピクセルにする」といったような半強制的な指定をするファイル、スタイルシートを使用するのが便利です。 それではスタイルシートを追加しましょう。 最初にWebForm1.aspxを追加した時と同じ要領で、Solution Explorer上のプロジェクト名（ここではWebApplication1）を右クリックして、Add | New Item... を選択します。（キーボードではCtrl+Shift+Aです） そして Style Sheet をダブルクリックして追加します。 すると以下のように、StyleSheet1.css ファイルが追加されたことが確認できます。 このファイルに対して、直接手入力でバリバリとスタイル定義の追加をしていくことももちろん可能なのですが、ここではVisual Studio の持つ機能を使用して、スタイルの書き方をよく覚えていなくても（忘れてしまっても）書くことができる方法を紹介します。 まず画面の左上の方に、以下のような「Add Style Rule」ツールボタンがあると思います。 こちらをクリックして、スタイル定義の追加を開始しましょう。 Element を選択して、ドロップダウンの中からここでは h1 を選びます。 （今行おうとしているのは、あらゆる <h1>タグで指定された文字を強制的に緑色にするスタイル定義を追加することです） そしてダイアログボックスの真ん中にある ＞ ボタンを押して、h1を Style rule hierarchy に追加して、OKを押します。 するとスタイルシートにh1{} が追加されます。 この｛ ｝の中に、h1タグに対して強制的に行いたいこと（ここでは文字を緑にする）を記述します。 改行のために｛ ｝の中でEnterキーを押すと、以下のようにIntellisenseが働いて、記述したい定義を間違いなく入力できるようになります。 ここでは色を指定したいので、colorを選択して：をつけると、さらに何色を設定したいか選択できるようになるので、Greenを選択してみます。 すると、以下のようにh1に対して色は緑にすることを定義するための記述ができます。 （もちろんIntellisenseを無視して手入力しても問題ありません） とりあえずこれでスタイルシートも出来たのですが、まだ、元のWeb ページである WebForm1.aspx がこのスタイルシートを参照するように設定できていませんので、その設定をします。 画面上のタブを WebForm1.aspxに切り替えます。（マウスでWebForm1.aspxタブをクリックするか、キーボードのCtrl+Tabキーを押します。） そして、以下のようにスタイルシートをDrag&Dropして、参照のためのタグを自動的に生成します。 挿入位置は2行目でなくても動作しますが、このあたりが見やすいように思います。 これで完成です。 F5キーを押して実行してみます。 すると、先の<h1>タグで指定された文字だけが緑色になり、スタイルシートが機能していることが確認できます。 また、Visual Studio 2010 ではこのスタイルシートの全体像を簡単に把握したり、参照・編集したい定義にすぐに移動したりするための CSS Outline 機能があります。 画面の左端に Css Outline というタブがあるので、こちらをクリックすると表示されます。
もっとも今回はまだh1の定義しか追加していないため、これを開いてもあまり役には立たないかも知れませんが、実際にはスタイルシートには大量の定義を追加するのが普通なので、この機能は役に立つと思います。 以下は、Visual Studio 2010 で空ではないASP.NETアプリケーションを作る際に、Visual Studio 2010 が自動的に生成するスタイルシートを開き、そのアウトラインを表示しているところです。
このような、現実的な大きなCSSファイルを編集する際には、Visual Studio 2010 の持つ機能が生きてくると思います。 活用していただければ幸いです。