12. テンプレートを利用した段組レイアウト
Expression Webでは、CSSを使った段組レイアウトテンプレートが用意されています。これを利用して思い通りのレイアウトページを作成しましょう。
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に調整します。
INDEX
問題は解決しましたか?
操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!