特集
|
 |
|
|
|
●Visual Studio 2005との比較 − スタイルの指定
VS 2005においても、任意のコントロール上で右クリックして［スタイル］を選択することで、GUIを用いたスタイルの指定を行うことができる。
 |
| VS 2005におけるCSSスタイルの設定 |
| ASP.NETコントロールを右クリックすると表示されるコンテキスト・メニューから［スタイル］を選択することでCSSのスタイルを指定できる。 |
その際に表示される［スタイル ビルダ］ダイアログは、Expression Webの［新しいスタイル］ダイアログに似ているが、CSSのコード内容が表示されない点が異なっている。また、Expression Webでは直接CSSの項目名（例えば［font-style:］という項目に対して「italic」という値など）を用いているが、VS 2005ではCSSの表記とは異なる項目名（例えば［フォント属性］−［斜体:］という項目に対して「斜体」という値など）が用いられている。
 |
| VS 2005の[スタイル ビルダ]ダイアログ |
| Expression Webと比較的近い画面だが、項目名が実際のCSSの表記と異なり、さらにCSSのコード内容が表示されない。 |
VS 2005の［スタイル ビルダ］ダイアログの使い勝手は悪くはないが、指定するCSSの項目が分かっている場合にはExpression Webの［新しいスタイル］ダイアログの方が直感的で分かりやすいだろう。
また、VS 2005では、HTML／ASPXファイルを編集中に［スタイル ビルダ］で指定したスタイルはすべてstyle属性で（Expression Webでいうところのインライン・スタイルで）保存されるため、再利用できないという問題点が存在する。これはCSSを活用するうえでは大きな問題点といえるだろう。
●スタイルシート・ファイルを使ってみよう
前項でのスタイル指定は分かりやすく、初めてCSSに触れる人にとっても分かりやすいものであったが、クラスを使ったスタイル指定ができるだけではCSSサポートをうたえない。前項の内容だけでは、ページごとにスタイルが保存されてしまうため、Webサイト全体でスタイルを共用することができないのだ。
もちろん、Expression Webは既存のスタイルシート・ファイルの読み込みや作成もサポートしている。これにはスタイル・ペイン（の［スタイルの適用］タブ）の［スタイル シートの適用］をクリックして［スタイル シートの適用］ダイアログを表示させる。
 |
| ［スタイル シートの適用］ダイアログ |
| 右側の［適用方法］に［リンク］や［インポート］があることに注目。 |
ここでは［参照］ボタンから既存のスタイルシートを指定することで、ページにスタイルシートを読み込むことができる。［適用方法］として［リンク］を選択すると<link>タグを用いたスタイルシート・ファイルの指定となるが、［インポート］を選択すると<style>タグ内で@import規則を用いたファイル指定となる。ダイアログの［OK］ボタンをクリックするとスタイルシート・ファイルで定義されたスタイルが読み込まれ、スタイル・ペイン（の［スタイルの適用］タブ）の一覧に追加される。
 |
| スタイル・ペイン（の［スタイルの適用］タブ）のスタイル一覧 |
| スタイルシート・ファイル（myStyle.css）で定義されたスタイルが一覧に追加されている。 |
このように、外部のスタイルシート・ファイルで定義されたスタイルも同様に使用することができる。
また、スタイル・ペイン（の［スタイルの適用］タブ）の［新しいスタイル］をクリックすると表示される［新しいスタイル］ダイアログ内の［定義先］では、「既存のスタイルシート」を選択することで、スタイルの定義をページ内ではなく、スタイルシート・ファイルに保存することもできる。
 |
| ［新しいスタイル］ダイアログの上部 |
| ここではスタイルの定義先として外部にある既存のスタイルシート・ファイルを指定している。［定義先］を「新しいスタイルシート」を選択すればCSSファイルを新規作成することもできる。 |
なお、詳細は省略するが、新しいCSSファイルを作成する場合も、同じように［新しいスタイル］ダイアログで［定義先］を「新しいスタイルシート」にして定義を追加すればよい。
●Visual Studio 2005との比較 − スタイルシート・ファイルの利用
VS 2005でも、既存のスタイルシート・ファイルを用いることができ、HTMLタグのclass属性やASP.NETコントロールに対しCSSのクラス名を指定することで、スタイルの設定が行える。
しかし、Expression Webのように使用可能なスタイルが一覧表示されるわけではなく、クラス名を直接入力しなければならない。常にプレビュー状態のスタイルから選択することができるExpression Webの方がデザインは行いやすいだろう。また、前述のとおりVS 2005の［スタイル ビルダ］で指定したスタイルはすべてインラインで保存され、外部のスタイルシート・ファイルに保存することはできない。
こうした点を考えると、VS 2005でもCSSを用いたデザインを行うことは可能であるが、Expression Webの方がより柔軟な操作ができるといえるだろう。
続いて、Expression WebのXHTMLサポートについて説明しよう。
 |
 |
| INDEX | ||
| ［特集］Microsoft Expression Web製品レビュー（前編） | ||
| Webデザイン・ツール「Expression Web」を試してみた | ||
| 1．Expression Webの概要と画面構成 | ||
| 2．Expression WebのCSSサポート | ||
 |
3．スタイルシート・ファイルを使ってみよう | |
| 4．Expression WebのXHTML対応機能 | ||
| ［特集］Microsoft Expression Web製品レビュー（後編） | ||
| プログラマーとWebデザイナーの分業を促進するASP.NETサポート | ||
| 1．ASP.NETコントロールのサポートとVS 2005との機能差 | ||
| 2．デザイン・サンプル:SqlDataSourceコントロールの配置 | ||
| 3．デザイン・サンプル:GridViewコントロールの配置 | ||
| 4．プログラマーとWebデザイナーの共同作業について | ||
 |
||
- 第2回 簡潔なコーディングのために （2017/7/26）
ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている - 第1回 Visual Studio Codeデバッグの基礎知識 （2017/7/21）
Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう - 第1回 明瞭なコーディングのために （2017/7/19）
C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える - Presentation Translator （2017/7/18）
Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
