ステップバイステップで基本的レイアウトをCSSで作成してみます。
仮の文字が入力されている現ページに、実際に見出しや本文を入力します。
完成例:
① [ヘッダ] と書かれた文字をダブルクリックします。
② そのまま ”サンプルサイト” と入力します。
③ 文字列を選択し反転させ、メニューの「挿入」 → 「段落」 → [見出し1] を選択します。
④ [コンテンツ] と書かれた文字をダブルクリックします。
⑤ 以下の文字列を入力します。コピーしテキストで貼り付けてください。
⑥ 文字列 ”メインタイトルが入ります” を選択・反転させ、メニューの「挿入」 → 「段落」 → [見出し2] を選択します。
⑦ 文字列 ”サブタイトルが入ります” を選択・反転させ、メニューの「挿入」 → 「段落」 → [見出し3] を選択します。
⑧ [コンテンツ] と書かれた文字をダブルクリックします。
⑨ 以下の文字列を入力します。コピーしテキストで貼り付けてください。
⑩ 文字列 ”サブメニュー” を選択・反転させ、メニューの「挿入」 → 「段落」 → [見出し4] を選択します。
⑪ [フッタ] と書かれた文字をダブルクリックします。
⑫ 以下の文字列を入力します。
ここまでの完成例:
① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。
② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグの候補] で [body] を選択します。
③ 以下のように属性値を設定したら [OK] をクリックします。
設定結果:
① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。
② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#header h1” と入力します。
③ 以下のように属性値を設定したら [OK] をクリックします。
設定結果:
① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。
② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#contents h2” と入力します。
③ 以下のように属性値を設定したら [OK] をクリックします。
設定結果:
① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。
② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#contents h3” と入力します。
③ 以下のように属性値を設定したら [OK] をクリックします。
設定結果:
① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。
② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#column h4” と入力します。
③ 以下のように属性値を設定したら [OK] をクリックします。
設定結果:
① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。
② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#column p” と入力します。
③ 以下のように属性値を設定したら [OK] をクリックします。
④ コラムの本文にあたる部分の文字列 ”サブメニュー1~5” をまとめて選択・反転させ、メニューの[挿入] → [段落] → [標準] を選択します。
⑤ [ページ編集] 画面に戻りコラムの段落にスタイルが適用されるのを確認します。
設定結果:
コンテンツブロックに挿入する画像に回り込みを設定します。
① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。
② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#contents img” と入力します。
③ 以下のように属性値を設定したら [OK] をクリックします。
④ コンテンツブロックに画像、この場合は社会福祉協議会のマークを挿入します。
設定結果:
段落に回り込みを解除するスタイルを設定します。
① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。
② [スタイルの設定] ダイアログで [クラスのスタイルを設定] を選択し、[クラス名] に任意の名前、例えば ”.imageclear” と入力します。
③ 以下のように属性値を設定したら [OK] をクリックします。
④ 回り込みを解除する範囲を選択して、メニューから [挿入] → [段落] → [標準] を選択します。
⑤ 挿入した段落にカーソルを置いてから、[スタイルエクスプレスビュー] の [カーソル位置] パネルを表示します。[カーソル位置] パネルの p を右クリック → [クラス設定] → [imageclear] を選択します。段落以降の回り込みが解除されたのを確認します。
設定結果: