第9回目
日 時：2013年1月19日 13:30～17:00
場 所：団交室Ⅰ Ⅱ
出席者：受講者 25名、HPWG 8名
講 師：熊谷 決
内 容：レイアウト作成
CSSで2段組のレイアウトを作成した。CSSレイアウト構造は、ページ全体をまとめる「メイン」レイアウトコンテナの中に「ヘッダー」「ナビ」「コラム」「コンテンツ」「フッター」の５つレイアウトコンテナを配置し、「コラム」と「コンテンツ」レイアウトコンテナはそれぞれ左と右にフロートした。
詳細は講師の用意した資料のとおりです。レイアウトは完成したが、見出し等の修飾については資料を参照して各自完成させることが宿題となりました。
レイアウト作成には直接関係ありませんが、ホームページ・ビルダーを使用するに当たり便利な設定変更を行いました。
- ステータスバーにタグ構造を表示する
「ツール」→「オプション」の「表示」タブで「ステータス表示領域」の「タグ階層」を選択する。
画面最下段に、編集画面でカーソルがおかれた位置のタグ階層が表示されるようになる。 - CSSにショートハンドを適用する
「ツール」→「オプション」の「ソース編集」タブで「スタイルシート」の「詳細設定」ボタンをクリックし、現れたダイアログで「お勧め」ボタンをクリックする。
CSSにショートハンドが適用されソースが簡潔になる。
一例 margin-top : 1px ;margin-left : 2px ;margin-right : 3px ;margin-bottom : 4px ;が
margin : 1px 3px 4px 2px;となる。
最終的に本日のCSSの設定は下表のとおりとした。
| * | 4方向マージン | ０ |
| 4方向パディング | ０ | |
| #main | 4方向マージン | 自動 |
| 4方向ボーダー | 2px 実線 オリーブ | |
| 4方向パディング | 0px | |
| 幅 | 640px | |
| 高さ | 自動 | |
| #header | 背景画像 | urlを指定 |
| 高さ | 100px | |
| #column |
|
5px |
| 上方向パディング | 10px | |
|
145px | |
| 回り込み | 左 | |
| #cont | 水平方向の配置 | 左揃え |
| 左方向マージン | 5px | |
|
5px | |
| 上方向パディング | 10px | |
|
480px | |
| 回り込み | 右 | |
| #footer |
|
1 px 実線 オリーブ |
| 高さ | 20px | |
| 回り込み解除 | 両方 | |
| #navi |
|
黒 |
| 左方向パディング | 50px | |
| 上方向パディング | 10px | |
| 幅 | 590px | |
|
左 | |
| #navi ul | リストマークのタイプ | なし |
| #navi ul li | 背景色 | 白 |
| 垂直方向の配置 | 中央 | |
| 水平方向の配置 | 中央 | |
| 上平方向マージン | 0px | |
|
5px | |
| 下平方向マージン | 0px | |
| 左平方向マージン | 0px | |
|
0px | |
| 幅 | 100px | |
| 高さ | 自動 | |
| 回り込み | 左 | |
| #navi ul li a | 文字飾り | なし |
| 背景色 | 白 | |
| 表示 | BLOCK | |
| #navi ul li a:hover | 前景色 | オリーブ |
| 背景色 | 黄色 | |
| body | フォント・サイズ | やや小さい |
| 行の高さ | 18 px | |
| 水平方向の配置 | 中央揃え | |
| #header h1 | フォント・サイズ | 大きい |
| 前景色 | 白 | |
| 水平方向の配置 | 左揃え | |
| 上方向パディング | 15px | |
| 左方向パディング | 10 px | |
| #cont h2 | フォント・サイズ | 16 px |
| 上方向ボーダー | 1px 実線 オリーブ | |
| 左方向ボーダー | 10 px 実線 オリーブ | |
| 右方向ボーダー | 1 px 実線 オリーブ | |
| 下方向ボーダー | 1 px 実線 オリーブ | |
| 上方向パディング | 5 px | |
|
10px | |
| 下方向パディング | 5px | |
| 下方向マージン | 15 px | |
| #cont h3 | サイズ | 12px |
| 前景色 | 白 | |
| 背景色 | オリーブ | |
| 上方向マージン | 10px | |
| 下方向マージン | 10px | |
| 上方向パディング | 2px | |
| 左方向パディング | 5px | |
| 下方向パディング | 2px | |
| #column h4 | 前景色 | 白 |
| 背景色 | オリーブ | |
| 上方向パディング | 3px | |
| #column p | 水平方向の配置 | 左揃え |
| 4方向ボーダー | 1px 実線 オリーブ | |
| 4方向マージン | 0 px | |
| 上方向パディング | 3 px | |
| 左方向パディング | 10 px | |
| 右方向パディング | 10 px | |
| 下方向パディング | 3 px |
注：黄色は宿題の部分