はじめに
IT業界の外にいる一般の人たちは通常、開発者に対して「プロなんだからパソコン関係は何でもできるでしょ」と思い込んていたりしますよね。
例えば、デザイン部分を担当したことのないASP.NET開発者が、友人から「起業したので会社のサイトを作って！ おまえさんプロなんだからできるでしょ。頼むよ」と不意に頼まれ、結局引き受けてしまった。こういったケース、結構ありうるんじゃないでしょうか。
本稿では、このようなストーリーをベースに、ASP.NETとの連携にも優れたマイクロソフト社のWebオーサリングツール「Microsoft Expression Web」（以下、Expression Web）によるWebサイト制作方法を解説します。前編の今回は、Expression Webの特長を中心に紹介していきます。
対象読者
- はじめてWebサイトを制作する方
- デザイン部分も担当する必要があるASP.NET開発者
- XHTML＋CSSベースのWeb標準サイトを効率的に構築したい方
- 友人にサイト制作をムチャ振りされた可哀想な方
必要な環境
- Windows Vista、Windows XP Service Pack 2、またはWindows 2003 Service Pack 1以上
- .NET Framework 2.0以降
- Microsoft Expression Web
ASP.NET開発者に最適なWebオーサリングツールとは？
田中君はASP.NETプログラマ。先日、起業したばかりの友人の佐藤君が電話で「俺の会社のWebサイト作ってくれよ！」と依頼してきました。
田中君は自分のブログは持っていますが、今までWebサイトを作ったことがありません。「俺、プログラマだけど、Webデザイナーじゃないよ」と佐藤君に言いました。
しかし、佐藤君から「別に凝ったサイトじゃなくていいんだよ。シンプルで分かりやすいサイトでいいからさ。お前さん、コンピュータに詳しいプロなんだろ？ 頼むよ！」と言われてしまいました。
佐藤君の強引な頼みに田中君は断りきれず、結局Webサイトの制作を引き受けることに……。
その後、田中君は上司に相談したところ、「Expression Webを使ってみたらどう？ デザインも簡単にできるし、ASP.NETと連携できるからWebフォームなども作りやすいと思うよ。それに、Microsoft Officeに近い使い勝手だから、クライアントが自分で更新するのも簡単だし」と提案されました。
Expression Webのポイント
正確なレンダリングエンジンを搭載
Expression Webでは、正確なHTMLレンダリング（ブラウザと同じように表示すること）エンジンを搭載しています。したがって、実際の完成イメージのまま作業できるため、より感覚的に、快適に、Webページを作成することができます。
今まで他のWebオーサリングツールでうまく表示できなかったWebページの編集も、Expression Webを使えば、より効率的に作業が行えます。
Web標準サイト構築に最適
Web標準とは、国際的な標準化団体（W3C）によって策定された、Web技術仕様に関する規格です。
従来、インターネット上のWebページは、文書構造と書式（スタイル）が混在していました。つまり、見出しや段落といった「文書構造」と、文字の大きさや文字修飾（太字に変えたりアンダーラインを引いたり文字の色を変えたりなど）、レイアウトといった「書式」が密接に結びついていた訳です。
しかしこれだと、Webページを閲覧用と印刷用で切り替えたり、視力の弱い方に対して文字を大きくしたりと、環境によって見映えを変更するのに、ページ全体を修正する必要があり不便です。また、文書構造とデザインが混在していることで、メンテナンス性も悪くなります。
そこで、文書の論理構造だけをHTMLに、その他の見映えの部分はスタイルシート（CSS）にして別々に管理しよう、となりました。これに基づいて作られたWebサイトが、Web標準に準拠したサイト、ということになります。
Web標準に準拠したサイトを構築すると、以下のメリットが生まれます。
- どのブラウザ、OSにも対応したサイトになる
- サイトの更新・リニューアルがスムーズ
- 健常者だけではなく、高齢者の方や障害者の方にもアクセスしやすいサイトになる（Webアクセシビリティの向上）
- 検索エンジン最適化（SEO）の効果があり、サイト来訪者が増える
Expression Webでは、デザインビューでMicrosoft Office Wordのような感覚で、文字の色やサイズを変更したり、背景を変えたり、マージンや余白などの調整をすることができ、その結果はすべてスタイルシートで出力されます。Web標準に準拠したサイトを効率的に構築するのに最適です。
Expression Webで対応しているHTMLスキーマ
- HTML 4.01 Frameset
- HTML 4.01 Strict
- HTML 4.01 Transitional
- XHTML 1.0 Frameset
- XHTML 1.0 Strict
- XHTML 1.0 Transitional
- XHTML 1.1
対応しているCSSスキーマ
- CSS 1.0
- CSS 2.0
- CSS 2.1
- IE 6
Expression Webのコードビューでの編集
IntelliSenceで楽々コーディング
Expression Webでは、インテリセンスを搭載しています。HTMLの属性に限らず、JSファイルやCSSファイルにリンクしている場合は、その名前も候補に表示されるようになります。
W3Cに準拠しないHTMLのコードエラーをすばやく検出
開発者の中には、いかにきれいなコードを書くか、とにかく汚いコードは許せない、という方も多いのではないでしょうか？
Expression Webでは、W3Cに準拠しないHTMLのコードエラーをすばやく検出するので、Web標準に則ったHTMLコーディング作業が容易です。
<ul> <li>開発者向け<ul> <li>Visual StudioのTips</li> <li>C#に関する話題</li> <li>Visual Basicに関する話題</li> <li>ASP.NETのサンプル紹介</li> </ul> </li> <li>トラベル<ul> <li>アメリカ旅行記</li> <li>北海道旅行記</li> </ul> </li> <li>車・バイク<ul> <li>車に関する話題</li> <li>バイクに関する話題</li> </ul> </li> <li>プライベートコンテンツ<ul> <li>日常の日記</li> <li>自分の子供自慢</li> <li>ペットの話題</li> </ul> </li> </ul>
また、終了タグに対応する開始タグがない場合、このように黄色のマーカーで強調されます。たとえ対応する開始タグが存在していても、入れ子関係が不適切な場合はエラーとして返されます。
知りたい情報にすばやくアクセス
コード中の属性値はリンクになっていて、そこからすぐにリンク先にアクセスできます。属性にマウスカーソルを合わせ［Ctrl］キーを押すと、マウスカーソルが指の形に変化するので、その状態でクリックすることで、対象となるリンク先にすばやくアクセスできます。
