過去 9 年に渡ってリリースされてきた Web 作成ツール FrontPage は、FrontPage 2003 を最後のバージョンとして、2006 年に販売が終了しました。これまで FrontPage をお使いになってきたユーザーの方のために、マイクロソフトでは、企業ユーザー向けに Microsoft Office SharePoint Designer、Web デベロッパー向けに Microsoft Visual Studio、そして、Web デザイナー向けには Expression Web を提供しています。
Expression Web の最新バージョンである Expression Web 2 は、最近の Webサイトのトレンドと言える Web 標準に準拠する xHTML、CSS レイアウトのほか、Silverlight への対応、Adobe Photoshop ファイルのインポート、XML のカスタマイズ、ASP.NET 3.5 や PHP サポート、Windows Vista での動作といった最新の技術に対応しており、より便利に、より効率的に Web サイトを構築できるようになっています。
このコラムでは、FrontPage に不便を感じていた問題を解決する Expression Web 2 の主な機能を取り上げ、FrontPage ユーザーにとって、Expression Web 2 にどのようなメリットがあるのかを解説します。
スタイルの適用と管理
作成された ID やクラスのスタイルは、画面の右下に配置される [スタイルの適用] 作業ウィンドウに一覧表示されます。事前にプレビュー表示されるので適用したいスタイルがすぐにわかります。
CSS スタイルをポイントするとコードの内容がポップアップで表示される
また、スタイルを変更したい場合も、プレビューを確認しながら行えます。
変更したいスタイルを右クリックして [スタイルの変更] を選択
[スタイルの変更] ダイアログボックス。CSS のボックスモデルが表示されているので、
Padding や Margin の値が何を示しているのか直感的に把握できます。
さらに、Web ページに CSS ファイルをリンクさせたい場合も、[フォルダ一覧] 作業ウィンドウからドラッグ アンド ドロップで簡単に行えます。
CSS ファイルを編集ウィンドウまでドラッグ アンド ドロップ
CSS ファイルがリンクされたあとの画面
[スタイルの管理] 作業ウィンドウを利用すると、ID やクラススタイルのほか、タグに直接定義されたスタイルがすべて一覧表示されます。しかも、マウス操作で編集中の Web ページに生成されたスタイルを CSS ファイルに簡単に移動できるので、スタイルの管理がスムーズに行えます。
CSS ファイルが開いてスタイルブロックが移動される
CSS ファイルが自動的に開くので、その CSS ファイルを開く
CSS ファイルには移動されたスタイルブロックが挿入された
CSS ファイルの作成と編集
FrontPage で CSS ファイルを直接編集するには、すべて手入力する必要がありましたが、Expression Web では、CSS ファイルに直接スタイルを定義する場合は IntelliSence(入力補完) 機能がサポートされているので、効率的に CSS をコーディングできます。
プロパティの一覧から「background-color」をクリック
[色を選択] をクリック
FrontPage でおなじみのダイアログボックスが登場
色を指定したあとの画面
もし、記述に誤りがある場合はエラーを返してくれて、その理由も知らせてくれます。
エラー部分をポイントすると、その問題を指摘してくれる
このほか、HTML に適用されている CSS がある場合、その箇所をクリックすると関連する CSS にジャンプする機能が搭載されているので、HTML から CSS を呼び出す場合も便利です。
テンプレートの利用
Expression Web 2 ですばやく見栄えのいい Web サイトを作るには、組み込みテンプレートを利用すると便利です。[ファイル] - [新規作成] - [Webサイト] をクリックして、一覧からテンプレートを選択します。
Web サイトのテンプレート
なお、CSS レイアウトページをすばやく作成するには、[ファイル] - [新規作成] - [ページ] をクリックして、CSS レイアウトテンプレートを一覧から選択します。
CSS レイアウトのテンプレート
FTP のユーザー名とパスワードの保存
FrontPage から FTP で Web サイトを発行するとき、そのユーザー名とパスワードが保存されずに不便を感じていませんでしたか？ Expression Web 2 ではこれらを保存するオプションが追加されています。これで Web ページの更新作業は Expression Web 2 だけで完結できます。
[パスワードを記憶する] チェックボックスが追加
まとめ
Web ページに画像を挿入したり、表作成、ハイパーリンクの挿入などの基本的な機能は、FrontPage 2003 と同じです。見慣れたツールバーのアイコンやダイアログボックスが表示されるので、これまで通りに Web ページの作成が可能です。もちろん、FrontPage で作成してきた Web サイトは、引き続き Expression Web 2 で編集できます。
「Dreamweaver 使いから見た Expression Web」コラムでは、CSS Nite を主宰している鷹野さんが、別の切り口で Expression Web を解説しています。あわせてご覧になってみてください。
Microsoft Expression Web 2 システム要件
- Microsoft Windows XP Service Pack 2 または Windows Vista® オペレーティング システム
- 700 MHz 以上のプロセッサを搭載した PC
- 512 MB 以上の RAM
- 1.5 GB のハードディスク空き容量
- DVD-ROM ドライブ
- 1024 x 768 以上の解像度のモニタ
- インターネット アクセス
