第2回目(通算第13回)
日 時：2013年5月13日 13:30～17:00
場 所：団交室Ⅰ Ⅱ
出席者：受講者 9名、HPWG 8名
講 師：小野 惠一
内 容：E班ホームページTOPページをCSSで修飾
- テキストの入力・・・時間短縮のため用意したメモ帳の内容をコピペした。
- HTMLマークアップ
- ページ全体をdiv containerで括り、この中を内容によりdiv header、div contents、div footerの３ボックスに分けた。
- div contentsの中を箇所に応じてpタグ及びulタグで括った。
CSS修飾前の状態
- 各タグにid又はclassを付けCSSによる修飾を行った。(時間切れのため完成にはいたらず、宿題とした。)
最終的に本日のCSSの設定は下表のとおりとした。
| body | フォント | "ＭＳ ゴシック", sans-serif |
| 行の高さ | 1.5 | |
| 背景色 | #447744 | |
| #container | 背景色 | 白 |
| 4方向マージン | 自動 | |
| 幅 | 800px | |
| #header | 水平方向の配置 | 中央 |
| 上方向パディング | 80px; | |
| 幅 | 800px | |
| #contents | 幅 | 800px |
| #footer | 前景色 | 白 |
| 背景色 | 黒 | |
| 行の高さ | 65px | |
| 水平方向の配置 | 中央 | |
| 幅 | 800px | |
| 高さ | 65px | |
| 回り込み解除 | 両方 | |
| p.center | 水平方向の配置 | 中央 |
| 回り込み解除 | 両方 | |
| ul | 4方向パディング | ０ |
| 4方向マージン | ０ | |
| リストマークのタイプ | なし | |
| ul.menu1 ul.menu2 |
4方向マージン | 自動 |
| 幅 | 720px | |
| ul.menu1 li | 行の高さ | 40px |
| 水平方向の配置 | 中央 | |
| 背景色 | #115522 | |
| 幅 | 220px | |
| 高さ | 40px | |
| 回り込み | 左 | |
| 右方向マージン | 20px | |
| ul.menu2 li | 水平方向の配置 | 中央 |
| 幅 | 220px | |
| 高さ | 65px | |
| 回り込み | 左 | |
| 右方向マージン | 20px |