第12回勉強会
- 日 時：
- 2013年4月19日 13:30～17:00
- 場 所：
- 「かるがも」３Ｆ 団体交流室Ⅰ
- 出席者：
- 小野、福田、北條、河野（敬称略）
サイト作成 その２
前回の復習をした後、「新会員の栞」サイトを作成した。
手順
- div「contents」の入力：ワード文書「新会員の栞」の目次部分をコピーして、ソース画面で「コント」部分に貼り付けた。
(注意：編集画面で貼り付けないこと) - マークアップ
大見出し（AからIまでの9項）を「h2」で括る。
各小見出しについて番号なしリスト「ul li」で括る。 - CSSの設定 h2：
背景色、マージン及びパディングを設定する。 - CSSの設定 リスト：
ulについてリストマークを無しにする。
liについて 背景画像としてリストマークを入れる。
liについて マージン及びパディングを設定する。 - レイアウトコンテナーの挿入：
目次内容を2段組みにするため、AからE迄及びFからI迄をそれぞれレイアウトコンテナー（div）で括り、「div class=”mokuji”」と指定。 - CSSの設定 div class=”mokuji”：
幅をcontainerの幅800pxの1/2の400pxに設定し、回り込み「左」に設定。 - ここまでのCSSは下表のとおり(黒字は前回、赤字は今回の設定)
| * | マージン パディング フォントサイズ |
０ ０ 14px |
| body | フォント | メイリオ, sans-serif |
| #container | 幅 | ８００px |
| マージン | 自動 | |
| #header | 背景色 | aqua |
| 幅 | 800px; | |
| 高さ | 150px | |
| 位置 | 相対的 | |
| #contents | 幅 上方向マージン |
800px; 10px |
| #footer | フォントサイズ | 90% |
| 前景色 | 白 | |
| 背景色 | 黒 | |
| 水平方向の位置 | 中央揃え | |
| 幅 | 800px; | |
| 回り込み解除 | 両方 | |
| h1 | フォントサイズ | 大きい |
| 水平方向の位置 | 中央揃え | |
| 上方向パディング | 30px | |
| 文字間 | 0.3em | |
| img#logo | 位置 | 絶対絶対的 |
| 上位置 | 20px | |
| 左位置 | 10px | |
| h2 | 背景色 | #c0c0c0 |
| 上方向パディング | 3px | |
| 左方向パディング | 5px | |
| 下方向パディング | 3px | |
| 左方向マージン | 2px | |
| 右方向マージン | 2px | |
| .mokuji | 幅 | 400px |
| 回り込み | 左 | |
| li | 背景画像 | url(images/○○.gif); |
| 繰り返し | 繰り返さない | |
| 左方向パディング | 1.2em | |
| 左方向マージン | 1em | |
| a | 文字飾り | 無し |
宿 題
個別のページ作成に挑戦する。
条件
- レイアウトは2段組みとする
- 左側は幅200px程度の別ページへのリンク用のリストとする。
- 右側は幅600px程度の本文とする。