FEATURE 02 特集 ASP.NETではじめるWebプログラミング初心者もASPからの移行に悩んでいるあなたにもカッコいい Webアプリケーションを作るために西沢直木 Visual Studio .NETとCSSの基礎と効用 NISHIZAWA, Naoki が登場しました。 Technology Tools はじめに ✓ Visual Basic .NET どのように利用するか Visual C# .NET Visual Studio .NET で開発する SQL Server 2000 ASP.NETアプリケーションはなぜ自由 Oracle 9i CSSを利用する方法には、Webペー Access 2002 なレイアウトが可能なのでしょうか。ジ内のHTMLタグに直接記述する方法 ASP.NET それはCSSを利用して座標を指定してや、外部ファイルに定義する方法など Internet Information Services いるからです。本稿ではこのCSSが何があります。HTMLタグに直接記述すなのか、そしてVisual Studio .NETとる場合はstyle属性を使います。たとえ CSSの関係についてみてゆきます。ばテキストボックスの背景色を青くす ✓ Other: CSS る指定は次のようになります。 Level ★ ★ ★ ★ ★ CSSとは <input type="text" style="background-color:blue"> Samples スタイルを定義一方、外部ファイルにスタイルを定義する場合は、どの要素にどのような CSS（ Cascading Style Sheets）はスタイルを使うかをファイル内に指定 Webページ内の文字列や罫線、行の高しておき、利用するWebページから参さなどの見た目の部分を定義するもの照するようにします（図1）。たとえばです。CSSを使わなくてもHTMLタグ style.cssというファイルにスタイルをの属性を使って文字列の色などを指定定義し、HTMLドキュメントで利用すすることができますが、そもそもHTML る場合はそれぞれリスト1のような記述自体は文書の論理的構造を表現するもになります。のです。そこでスタイルの定義はHTML この例ではstyle.css内にテーブルのから切り離す目的で、レイアウトなどセルを表わすtdという要素に関するスのスタイルを定義するものとしてCSS タイルを定義しています。このスタイル dotNET Magazine 2003 Dec. 55 FEATURE 02 特集 ASP.NETではじめるWebプログラミングカッコいいWebアプリケーションを作るために図1：スタイル定義を分離したページ CSSファイル td { line-height: 2; width: 150; } を利用するHTMLドキュメント内には、 link href="style.css リスト1：CSSファイルとHTMLドキュメント HTMLドキュメント（略） <table> <tr> <td>cssのlineheightを使うと…… </tr> </table> （略） Webアプリケーションにおいても同様です。この自由なレイアウトを ASP .NET Webアプリケーションで実現すのようにstyle.cssを参照することが指るためにVisual Studio .NETではCSSを定されていますので、tdタグには行の使ってページ内に配置された各要素の高さ（line-height）とセルの幅（width）座標を定義しています。のスタイルが適用されます。 style.css td { line-height: 2; width: 150; } 利用するHTMLドキュメント <html> <head> <title>line-height</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <table> <tr> <td>cssのline-heightを使うと行の高さを指定することができます。「2」という値をセットすると行の高さは文字サイズの2倍の大きさになります。</td> </tr> </table> </body> </html> デフォルトの設定では、ASP.NET Webアプリケーションの作成時にドキレイアウトモードのようにグリッド単ュメントウィンドウ内に自由なレイア位での自由なレイアウトができる状態ウトが可能な状態（グリッドレイアウになっていません。このモードで細かトモード）になっています。このとき、いレイアウトをするにはtableタグなどして別ファイルに定義すると、スタイルテキストボックスなどの要素をドキュを使ってコントロールの位置を調整しを複数の画面で利用することができまメントウィンドウにドロップするとCSS てゆくことになります。自由が利かなす。異なる画面に同じデザインを適用で座標が表現されます。試しに何らかいので不便というわけではなく、項目することができるので、デザインに変更の要素をページに追加してHTMLビュの少ない入力画面など、シンプルなペがあった場合でもCSSファイルを変更ーを見るとstyle属性に、ージを作成するときはこちらのほうが複数画面でデザインを共有 CSSをHTMLドキュメントと切り離すれば良く、メインテナンスが楽です。 LEFT: 100px; TOP: 200px; 便利なこともあります。レイアウトモードをグリッドレイア Visual Studio .NETと CSSの関係のように座標が指定されています。にはプロパティウィンドウのリストボ 2つのレイアウトモード CSSで自由なレイアウトを実現ウトからフローレイアウトに変更するックスから「DOCUMENT」を選択し、 pageLayoutプロパティで「FlowLayout」コントロールのレイアウト方法にはを選択します（図2）。 Visual Studio .NETでは、ドキュメングリッドレイアウトモードの他にフロトウィンドウの自由な位置にコントローレイアウトモードがあります。フロールを配置して細かいレイアウトをすーレイアウトモードではコントロールることが可能です。これはWindowsアはドキュメントウィンドウにドロップドキュメントウィンドウにドロッププリケーションだけでなく、ASP.NET された順番で整列されます。グリッドするコントロールにも色や大きさなど 56 dotNET Magazine 2003 Dec. コントロールにスタイルを追加