第8回目

日　時：2013年1月16日　9:30～12:00

場　所：団交室Ⅰ Ⅱ

出席者：受講者　24名、HPWG　8名

講　師：小野 惠一　

内　容：TOPページを修飾する

各人のTOPページをCSSで修飾した。CSSレイアウト構造は、ページ全体をまとめる「コンテナー」レイアウトコンテナの中に「ヘッダー」「コンテンツ」「フッター」の３つレイアウトコンテナを配置した。

  1. 初期化
    ユニバーサルセレクタ(*)でマージンとパディングを「0px」にする。
  2. 「コンテナー」ブロックの設定
    1. 編集画面で全体を選択する。
    2. メニューバーの「挿入」から「レイアウトコンテナ」をクリックする。
    3. 画面右側の「スタイルエクスプレス 」ビューの「カーソル位置」で「div」を右クリックし「ルールの新規作成」をクリックする。
    4. 現れた「ルールの追加」ダイアログで「ID」を選択し「container」（半角英小文字であれば何でも可）と入力し「OK」をクリックする。
    5. 現れた「スタイルの設定」ダイアログで背景色をその他の色から「C2 FC CB」に、幅を「780ピクセル」に、マージンを「自動に」設定し、「OK」をクリックする。
  3. 「ヘッダー」見出し部分の設定
    1. 見出し部分を選択状態にして、上記と同様にしてレイアウトコンテナを挿入し、ID名を「header」とする。
    2. 「スタイルの設定」ダイアログで文字の配列を「中央揃え」に、上方向マージンとパディングをそれぞれ「10ピクセル」「20ピクセル」に、下方向マージン「20ピクセル」に設定する。
    3. 見出し部分を選択状態にして、画面左側のナビメニューから「ロゴの挿入」から「ロゴ」をクリックし、任意の形状を選択して「完了」をクリックしてロゴを挿入する。
  4. 「コンテンツ」ブロック部分の設定
    1. 「写真」から「ホームへ戻る」までを選択しレイアウトコンテナーを挿入する。
    2. ID 名を「contents」として、4方向マージンを「 自動」に、幅を「 640ピクセル」に設定する。
  5. リスト（ul）の設定
    1. スタイルシートマネージャーを起動し、「追加」をクリックする。
    2. スタイルの設定ダイアログで「HTMLタグのスタイルを設定」を選択し、「HTMLタグタグ名」に「ul」と入力する。
    3. 「リスト」タブで「リストスタイル無し」、位置タブの属性から「はみ出した場合の処理」を「不可視」に設定し「OK」ボタンをクリックする。
  6. リスト項目(li)の設定
    上記と同様にスタイルシートマネージャーで追加「li」で次の設定を行う。
    幅 「316ピクセル」、回り込み 「左」、ボーダー 「2px　実線　オレンジ」
  7. リンク付きリスト項目の（li a）設定
    上記と同様にスタイルシートマネージャーで追加「li a」で次の設定を行う。
    行の高さ 「50ピクセル」、高さ 「50ピクセル」、前景色 「白」、背景色 「緑」、文字飾り 「無し」、左方向パディング「 15ピクセル」 属性の「表示」で「 block」 。
  8. マウスが乗ったときの設定
    上記と同様にスタイルシートマネージャーで追加「li a:hover」で背景色 を「黄緑」に設定する。
  9. ホームへ戻るリンク部分の設定
    「ホームへ戻る」部分にカーソルをおき、「スタイルエクスプレス 」ビューで「p」を右クリックし、ID名を「modoru」として、「回り込み解除」を「 両方」に、「文字列の配置」を「 中央揃え」に、「上方向マージン」を 「20ピクセル」に設定する。 （注 上記5-3で「はみ出した場合の処理」を「不可視」に設定しないと上方向マージンが効かない）
  10. 「フッター」の設定
    1. 文末にカーソルをおき、「SHIFT」+「ENTER」を押した後「レイアウトコンテナ」を挿入し、「スタイルエクスプレス 」ビューで「div」を右クリックし、ID名を「footer」として、次の設定を行う。
      「文字列の配置」を 「中央揃え」に、「上方向パディング」及び「下方向パディング」を「20ピクセル」に
    2. この部分に著作権等を入力し、選択状態にしてツールバーの「段落の挿入/変更」ボタンから「アドレス」をクリックする。
  11. 写真の挿入
    「写真」部分を選択し、用意した写真を挿入し、属性の変更から代替えテキストを挿入する。
  12. 上書き保存と転送
    ロゴのファイル名の分かり易いものに変更し、保存先を自身で作成した「images」フォルダーに変更する。
    ファイル転送で転送対象ファイルは、HTMLファイルと、画像２ファイル

最終的に本日のCSSの設定は下表のとおりとした。

* マージン ０
パディング ０
#container 幅 780px
マージン 自動
背景色 C2 FC CB
#header 文字のレイアウト 中央揃え
上方向マージン 10px
上方向パディング 20px
下方向マージン 20px
#contents 幅 640px
マージン 自動
ul はみ出した部分の処理 不可視
幅 640px
リストマークのタイプ 無し
li 幅 316px
回り込み 左
ボーダー 2px　実線　オレンジ　
li a 行の高さ 50px
高さ 50px
前景色 白
背景色 緑
文字飾り 無し
左方向パディング 15px
display block
li a:hover 背景色 黄緑
#modoru 回り込み解除 両方
文字のレイアウト 中央揃え
上方向マージン 20px
#footer 文字のレイアウト 中央揃え
上方向パディング 20px
下方向パディング 20px
topへ こんにちはへ ご苦労様へ 斬・Webオーサリングソフト