www.wanichan.com

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

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

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

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

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ