特集
Microsoft Expression Web製品レビュー(前編)

Webデザイン・ツール「Expression Web」を試してみた

WINGSプロジェクト 土井 毅、 監修:山田 祥寛
2007/02/16
Page1 Page2 Page3 Page4

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デザイナーの共同作業について
 


Insider.NET フォーラム 新着記事
  • 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間