目　次

ＣＳＳレイアウトの作成手順

HTMLとCSS（スタイルシート）を組み合わせた「CSSレイアウト」を用いてサンプルサイトの作成を研修しました。

レイアウトコンテナの挿入

  1. メニューの ［挿入］ → ［レイアウトコンテナ］ を選択します。
  2. カーソル位置に「ヘッダ」と入力します。
  3. 下向き矢印キーを押して次の行へ移動して、上記１と同様にして［レイアウトコンテナ］を挿入し「ナビゲーション」と入力します。
  4. 以下同様にして「コラム」「コンテンツ」「フッタ」と入力します。
  5. 全体を選択状態にして挿入］ → ［レイアウトコンテナ］ を選択します。

スペースの初期化

  1. スタイルシートマネージャーを起動します。
  2. 「追加」ボタンをクリックします。
  3. ［スタイルの設定］ ダイアログで ［HTMLタグのスタイルを設定］ を選択し、［HTMLタグ名］ に半角で ［*］ と入力します。
  4. ［レイアウト］ タブのドロップダウンリストから ［４方向ともに同じ値］ を選択し、［マージン］ と ［パディング］ でいずれも ［0 ピクセル］ を指定して ［OK］ をクリックします。

メインのレイアウト

  1. 1番外側のdivのID名をmainとします。
  2. ［スタイルの設定］ ダイアログで ［レイアウト］ タブのドロップダウンリストから ［４方向とも同じ値］ を選択し、［マージン］ で ［予約語］ と ［自動］ を指定します。（ブロックを中央に配置する）
  3. ［ボーダー］ の ［幅］ で ［2 ピクセル］、［スタイル］ で ［実線］、［色］ で ［オリーブ］ を指定します。
  4. ［パディング］ で ［0 ピクセル］ を指定します。
  5. ［位置］ タブの ［幅］ で ［640 ピクセル］、［高さ］ で ［予約語］ と ［自動］ を指定し、［OK］ をクリックします。

ヘッダのレイアウト

  1. ヘッダ部分のdivのID名をheaderとします。
  2. ［スタイルの設定］ ダイアログで ［色と背景］タブ ［背景画像］：　「参照」 → 「ヘッダに使用する背景画像」（予め640×100ピクセルの画像を画像保存フォルダに保存しておきます。
  3. ［位置］タブ ［高さ］：　「100 ピクセル」と設定したら、［OK］ をクリックします。

コラムのレイアウト

  1. コラム部分のdivのID名をcloumnとします。
  2. ［スタイルの設定］ ダイアログで ［レイアウト］タブ ［左方向］：　［パディング］「5 ピクセル」、［上方向］：　［パディング］「10 ピクセル」
  3. ［位置］タブ ［幅］：　「145 ピクセル」、［属性］：　［回り込み］「左」を設定したら、［OK］ をクリックします。

コンテンツのレイアウト

  1. コンテンツ部分のdivのID名をcontとします。
  2. ［スタイルの設定］ ダイアログで ［文字のレイアウト］タブ ［水平方向の配置］：　「左揃え」
  3. ［レイアウト］タブ ［左方向］：　［マージン］「5 ピクセル」［右方向］：　［マージン］「5 ピクセル」、［上方向］：　［パディング］「10ピクセル」
  4. ［位置］タブ ［幅］：　「480 ピクセル」 ［属性］：　［回り込み］「右」 を設定したら、［OK］ をクリックします。

フッタのレイアウト

  1. フッタ部分のdivのID名をfooterとします。
  2. ［スタイルの設定］ ダイアログで ［レイアウト］タブ ［上方向］：　［ボーダー］「1 ピクセル」「実線」「オリーブ」
  3. ［位置］タブ ［高さ］：　「20 ピクセル」 ［属性］：　［回り込み解除］「両方」 を設定したら、［OK］ をクリックします。

ナビゲーション作成の準備

  1. ［ナビゲーション］ と書かれた文字を「メニュー１」と書き換えます。
  2. ［Enter］を押して改行し、続いて「メニュー２」と入力します。
  3. 以下同様にして「メニュー３」「メニュー４」と入力します。
  4. 文字を入力した「メニュー１」から「メニュー４」をダブルクリックして選択します。
  5. メニューバーの［挿入］から［リスト］で［番号なしリスト］を選択します。
  6. 「メニュー１」から「メニュー４」それぞれにダミーのリンク先［#］を設定します。

ナビゲーションのレイアウト

  1. ナビ部分のdivのID名をnaviとします。
  2. ［スタイルの設定］ ダイアログで ［色と背景］タブ ［背景色］：　「黒」
  3. ［レイアウト］タブ ［左方向］：　［パディング］「50 ピクセル」 ［上方向］：　［パディング］「10 ピクセル」
  4. ［位置］タブ ［幅］：　「590 ピクセル」 ［属性］：　［回り込み］「左」 を設定したら、［OK］ をクリックします。
  5. ［#navi ul］について［スタイルの設定］ダイアログで［リスト］タブ ［リストマークのタイプ］：　「なし」 を設定したら、［OK］ をクリックします。
  6. ［#navi ul li］について［スタイルの設定］ダイアログで ［色と背景］タブ ［背景色］：　「白」
  7. ［文字のレイアウト］タブ ［垂直方向の配置］：　「中央」 ［水平方向の配置］：　「中央」
  8. ［レイアウト］タブ ［４方向とも同じ値］： ［マージン］「0 ピクセル」 ［パディング］「0 ピクセル」 「右方向」： ［マージン］「5 ピクセル」
  9. ［位置］タブ ［幅］：　「100 ピクセル」 [高さ]：　「予約語」「自動」 ［属性］：　［回り込み］「左」を設定したら、［OK］ をクリックします。
  10. ［#navi ul li］について［スタイルの設定］ダイアログで［フォント］タブ ［文字飾り］：　「なし」
  11. ［色と背景］タブ ［背景色］：　「白」
  12. ［位置］タブ ［属性］：　［表示］「BLOCK」を設定したら、［OK］ をクリックします。
  13. ［#navi ul li a:hover］ について［スタイルの設定］ダイアログで［色と背景］タブ ［前景色］：　「オリーブ」［背景色］：　「黄色」を設定したら、［OK］ をクリックします。

文字入力

  1. 文字を入力して下記のマークアップします。
  2. ヘッダはh1、コンテンツはh2、h3及びｐ、コラムはh4とp
    今回の講習では時間短縮のため予め用意されたソースをコピペした。

レイアウトの仕上げ

  1. bodyタグについて
    ［フォント］タブ ［サイズ］：　「やや小さい」
    ［文字のレイアウト］タブ ［行の高さ］：　「18 ピクセル」、［水平方向の配置］：「中央揃え］
  2. ヘッダの h1タグ
    ［フォント］タブ ［サイズ］：　「大きい」
    ［色と背景］タブ ［前景色］：　「白」
    ［文字のレイアウト］タブ ［水平方向の配置］：　「左揃え」
    ［レイアウト］タブ ［上方向］：　［パディング］「15 ピクセル」 ［左方向］：　［パディング］「10 ピクセル」
  3. コンテンツの h2タグ
    ［フォント］タブ ［サイズ］：　「16 ピクセル」
    ［レイアウト］タブ ［上方向］：　 ［ボーダー］「1 ピクセル」「実線」「オリーブ」 ［パディング］「5 ピクセル」
    ［左方向］：　 ［ボーダー］「10 ピクセル」「実線」「オリーブ」 ［パディング］「10 ピクセル」
    ［右方向］ ［ボーダー］「1 ピクセル」「実線」「オリーブ」
    ［下方向］ ［マージン］「15 ピクセル」 ［ボーダー］「1 ピクセル」「実線」「オリーブ」 ［パディング］「5 ピクセル」
  4. コンテンツの h3タグ
    ［フォント］タブ ［サイズ］：　「12 ピクセル」
    ［色と背景］タブ ［前景色］：　「白」 ［背景色］：　「オリーブ」
    ［レイアウト］タブ ［上方向］：　 ［マージン］「10 ピクセル」 ［パディング］「2 ピクセル」 ［左方向］：　 ［パディング］「5 ピクセル」 ［下方向］ ［マージン］「10 ピクセル」 ［パディング］「2 ピクセル」
  5. コラムの h4タグ
    ［色と背景］タブ ［前景色］：　「白」 ［背景色］：　「オリーブ」
    ［レイアウト］タブ ［上方向］：　 ［パディング］「3 ピクセル」
  6. コラムの pタグ
    ［文字のレイアウト］タブ ［水平方向の配置］：　「左揃え」
    レイアウト］タブ ［上方向］：　 ［マージン］「0 ピクセル」 ［ボーダー］「1 ピクセル」「実線」「オリーブ」 ［パディング］「3 ピクセル」
    ［左方向］：　 ［マージン］「0 ピクセル」 ［ボーダー］「1 ピクセル」「実線」「オリーブ」 ［パディング］「10 ピクセル」
    ［右方向］：　 ［マージン］「0 ピクセル」 ［ボーダー］「1 ピクセル」「実線」「オリーブ」 ［パディング］「10 ピクセル」
    ［下方向］：　 ［マージン］「0 ピクセル」 ［ボーダー］「1 ピクセル」「実線」「オリーブ」 ［パディング］「3 ピクセル」