Single Article

Microsoft Expression WebはCSS周りが使いやすい

日本でも正式に発表され、試用版はフル機能が使えるということで早速使ってみた。Dreamweaver8と比べて、やはりWeb標準を意識し、CSSに関する機能はDWを超えていると思う。また、IEのレンダリングをシミュレートできたり、.ASPやJavaScript+ActiveXの開発に便利なインスペクターを備えるなど、さすがMicrosoftと思わせる仕様(?)も随所に見られる。

Expression Webの全体画面。左側にCSSや.ASP関連のtoolbox、右側にはCSSのプロパティなど。DWは基本が右カラムだけだが、最近の大きなモニタではこちらの方が使いやすいか。
MEW1.gif

MEW2.gif
CSSのスタイル一覧の表示。スタイルに適用されている背景や字体がスタイルとして表示され、非常に見やすい。また、htmlで使用されているスタイルに○が付いており、使っていないスタイルも一目瞭然である。

MEW3.gif
MEW4.gif

MEW5.gif
こちらは、スタイルの管理画面。コード内の記述順、カテゴリー別、要素別に表示できる。タグ名などをクリックするとCSSの適用/非適用を切り替えられる。

以下はCSSレポートの機能。CSSのエラーを表示してくれる。
MEW6.gif

こちらは適用されているスタイルの一覧を表示しているところ。サイト単位でのチェックも可能。
MEW7.gif

下図はデザインビューのブロック表示の例。非表示(display:noneなど)のスタイルを表示することも出来る。
MEW8.gif

ステータスバーに現在のHTMLのバージョン、ブラウザ互換性などの情報が表示される(コードから読み取る)ので便利。
MEW9.gif

Related Posts

Trackback URL

Post a Comment

Your email is never published nor shared.