CREATOR'S EX
Microsoft Expression Presents
Column Web
今回は「Expression® Web」のマークアップ機能にフォーカスします。
「Expression® Web」には、ソースコードのみを表示する「コードビュー」、ブラウザでの表示に近い WYSIWYG 編集を行う「デザインビュー」、コードビューとデザインビューを同時に表示する「分割ビュー」があります。この考え方は Dreamweaver と同様です。デザインビュー、コードビュー、Office 文書からのコピー アンド ペーストという順番で検証していきます。
デザインビューでのマークアップ
◇ 視覚補助
新規文書を作成すると、Expression® Web のドキュメントウィンドウは「分割ビュー」で表示されます。上からコード、下がデザインという配置は Dreamweaver と同様ですが、 ［タグセレクタ］ は画面上部に配置されています。
デザインビューにカーソルをおいて、文字を入力してみましょう。
コードビューでは「<p> 入力した文字 </p>」のようにマークアップされ、デザインビューでは、文字のまわりに点線で囲まれた長方形と、その左上に ［<p>］ と書かれたタブが表示されます。
デザインビューでは編集中の要素名が左上に表示される
HTML の要素は「ブロックレベル要素」と「インライン要素」に大別できます。Expression® Web ではブロックレベル要素をこのように視覚的に表示します。さらに、タブ部分をクリック （または Esc キー） すると、上下のマージンまで視覚的に表示してくれます。
各要素名をこのように表示してくれる機能は、マークアップを進める上で非常に役立つでしょう。不要な場合には、Ctrl+/キーを押す （または ［表示］ → ［視覚的補助］ → ［表示］） ことで非表示になります。この機能を ［視覚的補助］ と呼びますが、ドキュメント ウインドウ下部の中央の ［視覚補助：オン］ のように現在の状況が表示されており、右クリックして表示するオプションを細かく選択することができます。
［視覚補助］ 機能は、ドキュメントウィンドウ下部で細かく設定できる
◇ 見出しのマークアップ
見出しのマークアップは、ツールバーの ［段落］ と表示されている箇所をクリックしてプルダウンメニューから選択します。 ［見出し 1 <h1>］ のように、どのようなタグが記述されるかが表示されています。
見出しのマークアップは頻度の高い作業ですので、キーボードショートカットが追加されると便利です。
見出しの設定はツールバーのプルダウンメニューから行う
見出し 1 を設定すると、デザインビューでは ［<h1>］ と表示される
◇ その他のマークアップ
記号付きリスト （箇条書きリスト <ul>：unordered list）、番号付きリスト （<ol>：ordered list）、［アドレス <address>］、［書式設定済み <pre>］、［ブロック引用 <blockquote>］ なども、プルダウンメニュー内にありますが、その他 ［<div>、<span>］イメージなどは ［ツールボックス］ 内に用意されていて、ダブルクリックで挿入することができます。
［<div>、<span>］イメージなどは ［ツールボックス］ にある
まとめ
- ・「デザインビュー」、「コードビュー」、「分割ビュー」という概念は Dreamweaver と同様
- ・タグセレクタもあるが位置は上部
- ・［視覚補助］ 機能によって、デザインビューで要素名やブロックレベルの境界が表示される
