準備

• このstepで行うこと
• 【sample】完成レイアウト
• 用意したHTMLファイルをビルダーに取り込む

レイアウトのためのグループ分けをする

• 段組のためのグループ分けをする
  1. 上部タイトルとなる部分をグループ分けする
  2. 左側メニューになる部分をグループ分けする
  3. 右側のメインとなる部分をグループ分けする
  4. 「メニュー部分」と「メイン部分」のグループをまとめるグループを作る
  5. ページの一番下の部分をグループ分けする
• 全体をレイアウトコンテナで囲む
• ドキュメントアウトライナからグループ名をつける場合

スタイルシートでレイアウトする

• 全体のサイズを指定する
• 左側メニューになる部分のサイズを指定する
• 右側メインになる部分のサイズを指定する
• スタイルシートマネージャーの様子

回り込みで段組を実現する

• ビルダーで回り込みを指定する際の注意点
• 『id名　menu』を左側に配置する
• 『id名　main』を右側に配置する
• 『id名　footer』で回りこみ解除にする
• ここまでの状態<1>

全体に共通するスタイルを指定する

• [HTMLタグ名]でスタイルを指定する
• 利用されているHTMLタグ名を確認する方法
• 背景色のスタイル
• 「Welcome to Gardeners!」の文字サイズを指定する【H1】
• 「見出し1」に点線の下線を引くように指定する
• 段落内にある文字サイズの指定
• 段落内の行間を広げる
• ここまでの状態<2>

左側メニュー部分となる個所のスタイルを指定する[�T]

• 左側メニュー部分のグループ名
• 背景色を指定する
• メニュー部分の背景色等を指定する
  • 文字サイズの指定
  • 背景色の指定
• ここまでの状態<3>

左側メニュー部分となる個所のスタイルを指定する[�U]

• 左メニュー部分全体の余白を調整する
• 見出し2　の余白を指定する
• 見出し2　に飾りをつける
• ここまでの状態<4>

右側メイン部分となる個所のスタイルを指定する

• 右側メイン部分のグループ名
• メニュー部分の背景色等を指定する
  • 文字サイズの指定
  • 背景色の指定
• 見出し2(「Flower」)の余白を調整する
• 見出し2(「Flower」)の文字間隔を広げる
• 見出し3(「ラベンダー」)の見た目を見出し1と同じにする
• これまでの状態<5>

全体の調整

• フォントを指定する
• 中央に配置する(NN7/Opera7/Firefox)
• 中央に配置する(IE6)
• 完成レイアウト<6>

サイト内検索

FAQ

ホームページビルダーの操作等で多く寄せられる質問を集めました。

Question log

質問BBSに寄せられたログを公開しています。