Expression WebでWebサイトを作ってみよう (1)

はじめに

　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ファイルにリンクしている場合は、その名前も候補に表示されるようになります。

divタグを入力すると、属性が候補としてリストアップ

class属性を入力後、CSSファイルに存在するクラス名が候補としてリストアップ

W3Cに準拠しないHTMLのコードエラーをすばやく検出

　開発者の中には、いかにきれいなコードを書くか、とにかく汚いコードは許せない、という方も多いのではないでしょうか？

　Expression Webでは、W3Cに準拠しないHTMLのコードエラーをすばやく検出するので、Web標準に則ったHTMLコーディング作業が容易です。

互換性のない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>

　また、終了タグに対応する開始タグがない場合、このように黄色のマーカーで強調されます。たとえ対応する開始タグが存在していても、入れ子関係が不適切な場合はエラーとして返されます。

HTMLのエラー通知

知りたい情報にすばやくアクセス

　コード中の属性値はリンクになっていて、そこからすぐにリンク先にアクセスできます。属性にマウスカーソルを合わせ［Ctrl］キーを押すと、マウスカーソルが指の形に変化するので、その状態でクリックすることで、対象となるリンク先にすばやくアクセスできます。

［Ctrl］キーを押しながらクリックすると...

リンク先のファイルを閲覧できます