Visual Studio 2008で進化するASP.NET 3.5の開発手法（前篇）

VS 2008を利用したASP.NET 3.5の開発方法を学習する 1

CSS管理機能の向上

　VS 2008のWebデザイナ上で利用できる新機能の1つとして、CSSの管理、作成、利用に関するツールウィンドウが挙げられます。VS 2005では、スタイルシートのファイル上で設定を行い「Webデザイナを切り替えて」それらを適応するといった手法をとっていたと思います。VS 2008上では、CSSの管理、作成、利用がこのツールウィンドウ上で行えるようになっています（図12）。

図12 スタイルの管理ツールウィンドウ

　VS 2008で追加されたツールウィンドウ上のCSS管理機能は全部で3種類あります。

• スタイルの管理
  • CSSファイル内、作業中のページにおけるスタイルを一元管理するウィンドウで、利用しているスタイル、利用していないスタイルを一目で確認できる
• スタイルの適用
  • スタイルの管理の中で利用しているスタイルだけが表示されるウィンドウで、Webデザイナ上でフォーカスの当たっている要素に対してスタイルを適用することができる
• CSSのプロパティ
  • 対象の要素がどのような要素に組み込まれているかどうかのチェックと、スタイルのプロパティの確認と修正を行うことができる

スタイルの管理、スタイルの適用ツールウィンドウの共通機能

　スタイルの管理、スタイルの適用ツールウィンドウは、それぞれCSSの管理/適用と機能が分かれていますが、共通機能もあります。ここではその共通部分について解説します。

　図12の上部に［新しいスタイル］という項目がありますが、これをクリックするとダイアログ形式で新しいスタイルを作成できます（図13）。

図13 新しいスタイルダイアログ

　VS 2005上でもスタイル ビルダダイアログがあり、ダイアログ形式によるスタイルの設定が行えました。プレビュー機能は付いていましたが、すべてのスタイルが日本語で書かれていたのと、スタイルの説明部分が表示されなかったため、少し扱いづらかったかと思います。そういった点でも改良されているため、VS 2008の新しいスタイルダイアログは扱いやすくなっています。

　新しいスタイルダイアログでは、ダイアログ上部に表示されているセレクタは「インライン形式で要素内に埋め込む」「新しいスタイル名で作成する」「div、span、bodyなどの要素に対応したスタイルを作成する」のどれかを選択することができます（図14）。既にページ内でIDが作られている場合にはIDも表示されますが、規定ではIDは表示されません。

図14 セレクタの選択

　定義先は「現在のページ」「既存のスタイル シート」「新しいスタイル シート」から選択でき、それぞれ対応した部分にスタイルが作成されます。既にCSSファイルを持っていて追加でスタイルを作成したい場合は［既存のスタイル シート］を選び、右隣にあるURLテキスト内に作成済みのCSSファイルを記述します（図15）。その後でダイアログ内のスタイル設定を行い［OK］をクリックすると、CSSファイル内に追加でスタイルが記述されます。

図15 定義先の選択

　続いて、ツールウィンドウによるCSSの扱い方を解説します。

　スタイルの管理、スタイルの適用ツールウィンドウでは［新しいスタイル］の他に、外部CSSファイルと連結できる［スタイルシートの適用］があります。この機能では、連結したCSSファイルで定義されているすべてのスタイルを表示して管理できます。

図16 CSSファイルと連結させた画面

　このツールウィンドウの中で表示されるスタイルは、3色の点および丸い外枠のあり/なしで区別されますが、それぞれのアイコンは以下の内容を示しています。

• 青色
  • 要素に対して利用されるスタイル
• 緑色
  • クラスに対して利用されるスタイル
• 赤色
  • IDに対して利用されるスタイル
• 外側の丸枠
  • 既に利用されているスタイル

　このアイコンによる分類は、シンプルなWebページから複雑なCSS構成のWebページまで、大きな効果を発揮します。他にもスタイル上にマウスカーソルをあてることで、そのスタイルがツールチップ上に表示される機能も追加されています（図17）。

図17 スタイルのツールチップ表示

スタイルの管理ツールウィンドウ

　スタイルの管理ツールウィンドウは前項で説明したアイコンを利用し、そのページでスタイルが利用されているかどうかをすぐに見分けることができます。また、スタイルの管理ツールウィンドウから行える機能の1つとして、スタイルのドラッグ＆ドロップによる移動があります。例えば、Webページ上に直接記述されたスタイルをCSSファイルに移したい時に、［作業中のページ］から目的のCSSファイルにドラッグすることで移動できます（図18～19）。

図18 スタイルのドラッグ前

図19 スタイルのドロップ画面

スタイルの適用ツールウィンドウ

　スタイルの適用ツールウィンドウでは要素に対するスタイルの適用をワンクリックで行えるようになっています（スタイルの管理機能でもスタイルの適用はできますが、スタイル上で右クリック→スタイルの適用と若干手間がかかります）。

　スタイルの適用ツールウィンドウ上ではクラスとIDのスタイル（要素に追加することができるスタイルのみ）が表示されます。ブロックのスタイル等は表示されませんが、文字フォントや背景など一部のスタイルはスタイルの適用ツールウィンドウ上でプレビューされて表示されます。

　スタイルの適用手順ですが、Webデザイナ上で、スタイルを適用したい要素を選択します（フォームデザイナ、HTMLデザイナどちらもでも構いません）。選択後、スタイルの適用ツールウィンドウから適用したいスタイルをクリックします（図20）。クリックすると、Webデザイナ上にスタイルが反映されます（図21）。

図20 スタイルの適用前の画面

図21 スタイルの適用後の画面

CSSのプロパティツールウィンドウ

　CSSのプロパティツールウィンドウは、定義されたスタイルのプロパティの他、利用していないCSSプロパティも表示します。上書きされた親のCSSプロパティは後述する［概要］表示の時に確認する事ができます。

　現在選択している要素やASP.NETサーバーコントロールに適用されているスタイルが表示されますが、通常のプロパティウィンドウ同様に、このプロパティウィンドウ上で変更したスタイルプロパティは各スタイル上で更新されます。

　Webページの要素を配置していく過程で要素が入れ子になっていくのは避けて通れません。このCSSのプロパティツールウィンドウでは、フォーカスのある要素が親の要素から受け継いでいるスタイルも表示されます。［適用されているルール］の部分で親要素のスタイルの確認もできますが、その時プロパティ上に赤線が入っている場合があります。これはより強いスタイルが適用されているため、利用されていないことを示します（図22）。図22の場合では、body要素で定義されているフォントファミリーと背景色が、div.SampleStyle要素上では上書きされていることを確認できます。

図22 CSSのプロパティツールウィンドウとWebデザイナ

　CSSのプロパティで使い勝手がいい機能として、［概要］表示があります。図22の右上に［概要］ボタンがあります。このボタンをクリックすると、フォーカスのある要素で現在適用されている属性のみを表示することができます（図23）。

図23 CSSのプロパティツールウィンドウの概要表示

　この時プロパティをクリックすると、どのスタイルのプロパティ設定かが分かるようになっています。上書きされたプロパティも表示されますが、クリックすると、どのスタイルのプロパティが上書きされたかのチェックもできるので、Webページのスタイル調整を行う場合などは非常に便利です。

図24 CSSのプロパティツールウィンドウの概要表示上の動作

HTMLデザイナ上のインテリセンス

　至ってシンプルな追加機能ですが、要素やサーバーコントロール上でスタイルのクラスなどを記述する時に、スタイルがインテリセンスとして表示されるようになりました。これはWebページに直接記述しているスタイルと、CSSファイル上のスタイルのどちらにも適用されます。

図25 HTMLデザイナ上のインテリセンス