TOP > Expression > Expression Web > Chapter 3 CSSによるレイアウト

12. テンプレートを利用した段組レイアウト

Expression Webでは、CSSを使った段組レイアウトテンプレートが用意されています。これを利用して思い通りのレイアウトページを作成しましょう。

> Page 2 > Page 3

1. CSSレイアウトページの新規作成

【ファイル→新規作成→ページ】をクリックします。
【新規作成】ダイアログの【ページ】タグを開きます。
ページの種類の一覧から「CSSレイアウト」を選択します。
CSSレイアウトのWebページテンプレートが表示されますので、任意のレイアウトを選択します。
ここでは、「ヘッダー、ナビゲーションバー、2列、フッター」を選択します。
［OK］ボタンをクリックします。
Untitled.htm（Webページ）とUntitled.css（CSSファイル）が生成され、CSSレイアウトの部分はすべてUntitle.cssに記述され、Untitled.htmにリンクされて開かれました。
※まだこの段階ではいずれのファイルも保存されていない状態です。
分割ビューに切り替えると、外部CSSファイル「Untitled.css」にリンクされていることが確認できます。
このあと、それぞれのCSSスタイルに背景色を設定します。
ここではまず、Webページ全体に背景色を設定します。クイックタグセレクタの<body>をダブルクリックすると、ページのプロパティダイアログが表示されますので、背景色を設定します。（→Webページの背景色の設定）
そして、#left_col以外のボックスに背景色を設定していきます。左の例では、ナビゲーション部分#top_naviは濃い緑色、2段組の全体ブロックの#containerは薄い灰色、そのほかのCSSスタイルの背景色を白に設定していきます。
次に、それぞれのボックスの中に文字入力していきます。まず、「#masthead」領域内にカーソルを移動し、見出し1を挿入します。
ツールバーの［スタイル］ボックスの一覧から「見出し1」を選択します。
h1ではマージンが設定されているため、下のマージンを0ピクセルにします。下の図のようにマウス操作でドラッグして、margin-bottom:0pxに調整します。