Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

.NET開発者のためのWebサイト制作入門(前編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/10/22 14:00

本稿では、マイクロソフト社のWebオーサリングツール「Microsoft Expression Web」を利用して、Webサイトを構築する方法を紹介します。前編の今回は、Wordライクな操作性、Web標準への準拠、ASP.NETとの連携といった、Expression Webの特長について触れます。

目次

はじめに

 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タグを入力すると、属性が候補としてリストアップ
divタグを入力すると、属性が候補としてリストアップ
class属性を入力後、CSSファイルに存在するクラス名が候補としてリストアップ
class属性を入力後、CSSファイルに存在するクラス名が候補としてリストアップ

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

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

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

互換性のない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のエラー通知
HTMLのエラー通知

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

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

[Ctrl]キーを押しながらクリックすると...
[Ctrl]キーを押しながらクリックすると...
リンク先のファイルを閲覧できます
リンク先のファイルを閲覧できます

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 小濱 良恵(コハマ ヨシエ)

    Microsoft MVP for Expression Web MSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageや...

バックナンバー

連載:Expression Webチュートリアル
All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5