Divタグとは?
まずはベースを作ります
①挿入バーのカテゴリを[一般]にして、[Divタグ挿入]ボタンをクリックします
②[Divタグを挿入]ダイアログボックスが開くので
IDに[base]と入力し、[新規CSSスタイル]をクリックします
③[新規CSSルール]ダイアログボックスが開くので、
セレクタタイプ→詳細設定をクリック
セレクタ→[#base]と入力します
設定をしたら[OK]をします
④[CSSファイルの新規保存]ダイアログボックスが開くので、
CSSファイルに名前を付けて保存します
⑤[#baseのCSSルール定義]ダイアログボックスが開くので、
カテゴリを[ボックス]にし、幅を[750px]に高さを[800px]に設定します
⑥余白を全て[10px]に、マージンの左右を[自動]に設定します
⑦カテゴリから[ボーダー]を選択します
スタイル(全て同一):二重線
幅(全て同一):3px
カラー(全て同一):#FFCC99
に設定します
⑧カテゴリから[背景]を選択します
背景:#FFFFCC を設定します
⑨[OK]ボタンをクリックします
⑩[Divタグを挿入]ダイアログの[OK]ボタンをクリックします
これでIDが[base]のDivタグが挿入されました。
これがホームページの土台となりますので、
この中に本文や写真、コンテンツを入れていきます。
今回は[base]の中に[left]と[right]のDivコンテンツを挿入してみましょう。
まずは左のコンテンツ[left]を挿入してみましょう。
①挿入バーのカテゴリを[一般]にして、[Divタグ挿入]ボタンをクリックします
②[Divタグを挿入]ダイアログが開くので、
IDに[left]と入力し、[新規CSSスタイル]をクリックします
③[新規CSSルール]ダイアログが開くので、
セレクタタイプ:詳細設定をクリック
セレクタ:[#base #left]と入力
設定をしたら[OK]をします
④[CSSファイルの新規保存]ダイアログが開くので、CSSファイルに名前を付けて保存します
⑤[#base #leftのCSSルール定義]ダイアログが開くので、カテゴリを[ボックス]にし、
幅:300px
高さ:700px
フロート:左
余白:(全て同一)10px
マージン:上50px 左10px
に設定します
⑥あとは前回と同様に[ボーダー]と[背景]の設定をして[OK]をクリックします
(カラーのみ違う色にしましょう)
次に右のコンテンツ[right]を挿入してみましょう。
⑦挿入バーのカテゴリを[一般]にして、[Divタグ挿入]ボタンをクリックします
⑧[Divタグを挿入]ダイアログが開くので、
IDに[right]と入力し、[新規CSSスタイル]をクリックします
⑨[新規CSSルール]ダイアログが開くので、
セレクタタイプ:詳細設定をクリック
セレクタ:[#base #right]と入力
設定をしたら[OK]をします
⑩[CSSファイルの新規保存]ダイアログが開くので、CSSファイルに名前を付けて保存します
⑪[#base #rightのCSSルール定義]ダイアログが開くので、カテゴリを[ボックス]にし、
幅:380px
高さ:700px
フロート:左
余白:(全て同一)10px
マージン:上50px 左10px
に設定します
⑫あとは前回と同様に[ボーダー]と[背景]の設定をして[OK]をクリックします
(カラーのみ違う色にしましょう)
これで[base]の中に2つのコンテンツが追加されました。