ステップバイステップで基本的レイアウトをCSSで作成してみます。
タイトルを表示するブロックの ID スタイルを作成し、これを div タグに関連付けます。ヘッダの背景にはバナーとして 640 x 100 ピクセルの画像を表示します。
完成例:
① [スタイルエクスプレスビュー] の [カーソル位置] パネルを選択します。
② ヘッダブロックをクリックしてカーソルを表示すると、カーソル位置にかかわるタグやスタイル属性がパネルに表示されます。
③ 2つある div のうち、下位の div を右クリック → [ルールの新規作成] を選択します。
ヘッダブロックはレイアウトコンテナ div がメインブロックよりも下位
ヘッダブロックはメインブロックよりも下位に位置するので、手順③は <div id="main"> の下位にある div を選んで ID スタイルを作成します。
④ [ルールの追加] ダイアログで [ID] を選択して ”header” と入力します。
⑤ [属性も設定する] がオンになっていることを確認し、「OK」 をクリックします。
⑥ [色と背景] タブの [参照] → 「ファイルから」 をクリックし、ヘッダに使用する背景画像を指定します。
⑦ [位置] タブの [高さ] で [100 ピクセル] を指定し、「OK」 をクリックします。
⑧ ID スタイルが作成され、ヘッダブロックの div タグに関連付けられます。ヘッダブロックにはスタイルが設定されます。
ここまでの完成例:
補足情報などを表示するコラムブロックの ID スタイルを作成し、これを div タグに関連付けます。
幅は 145 ピクセルにしてページの左側に配置します。左側には 5 ピクセル、上側には 10 ピクセルの余白を挿入します。
完成例:
① [スタイルエクスプレスビュー] の [カーソルの位置] パネルを選択します。
② コラムブロックをクリックしてカーソルを表示すると、カーソル位置にかかわるタグやスタイル属性がパネルに表示されます。
③ 2つある div のうち、下位の div を右クリック → [ルールの新規作成] を選択します。
④ [ルールの追加] ダイアログで [ID] を選択して ”column” と入力します。
⑤ [属性も設定する] がオンになっていることを確認し、「OK」 をクリックします。
⑥ [レイアウト] タブの [上方向] をクリックし、[パディング] で [10 ピクセル] を設定します。
⑦ 引き続き、[左方向] をクリック、[パディング] で [5 ピクセル] を設定します。
⑧ [位置] タブの [幅] で [145 ピクセル] を指定します。
⑨ [属性] で [回り込み] の [左] を指定して、「OK」 をクリックします。
⑩ ID スタイルが作成され、コラムブロックの div タグに関連付けられます。コラムブロックにはスタイルが設定されます。
ここまでの完成例:
メイン情報を表示するコンテンツブロックの ID スタイルを作成し、これを div タグに関連付けます。
完成例:
① [スタイルエクスプレスビュー] の [カーソルの位置] パネルを選択します。
② コンテンツブロックをクリックしてカーソルを表示します。
③ 2つある div のうち、下位の div を右クリック → [ルールの新規作成] を選択します。
④ [ルールの追加] ダイアログで [ID] を選択し ”contents” と入力します。
⑤ [属性も設定する] がオンになっていることを確認し、「OK」 をクリックします。
⑥ [位置] タブの [幅] で [480 ピクセル] を指定します。
⑦ [属性] で [回り込み] の [右] を指定します。
⑧ [レイアウト] タブの [左方向] をクリックし、[マージン] で [5 ピクセル] を設定します。
⑨ 引き続き [右方向] をクリックし、「マージン」 で [5 ピクセル] を設定します。
⑩ 引き続き [上方向] をクリックし、[パディング] で [10 ピクセル] を設定します。
⑪ 最後に [文字のレイアウト] タブの [水平方向の配置] で 「左揃え」 を指定し、「OK」 をクリックします。
⑫ ID スタイルが作成され、コンテンツブロックの div タグに関連付けられます。コンテンツにはスタイルが設定されます。
ここまでの完成品:
商標などを表示するフッタブロックの ID スタイルを作成し、これを div タグに関連付けます。カラムとコンテンツの回り込みを解除して下側に配置します。ヘッダブロックの上側にはオレンジ色の点線を表示します。
① [スタイルエクスプレスビュー]の[カーソル位置]パネルを選択します。
② フッタブロックをクリックしてカーソルを表示すると、カーソル位置にかかわるタグやスタイルがパネルに表示されます。
③ 2つある div のうち、下位の div を右クリック→[ルールの新規作成]を選択します。
④ [ルールの追加]ダイアログで[ID]を選択して ”footer” と入力します。
⑤ [属性も設定する]がオンになっていることを確認し、「OK」をクリックします。
⑥ [レイアウト]タブの[上方向]をクリックし、[ボーダー]の[幅]で[1 ピクセル]、[スタイル]で[点線]、[色]で[オレンジ色]を指定します。
⑦ [位置]タブの[高さ]で[20 ピクセル]を指定します。
⑧ [属性]で[回り込みの解除]の[両方]を指定し、「OK」をクリックします。
⑨ ID スタイルが作成され、フッタブロックの div タグに関連付けられます。フッタブロックにはスタイルが設定されます。
完成例: