成安造形大学　コンピュータ基礎演習３・４　2009年度概要

第６回　スタイルシートその３[段組みレイアウト]（5月28日）

課題：スタイルシート(CSS)で段組みレイアウトを行う

HTMLファイルに段組みレイアウトを設定する

授業前の準備

• 教材のダウンロード：web_05.zip
• ダウンロードしたフォルダの名前を変更する
  • 例：web_05_10810000
• Dreamweaverを起動しサイト設定を行う
• サイト設定ではサイト名とローカルルートフォルダを設定する
• 退室時にはDreamweaverを終了させる前にサイト設定を削除およびフォルダを削除すること
• 必要に応じてデータは各自でUSBメモリなどにコピーする

ブロックの段組み設定

• CSSでのレイアウトではコンテンツをブロックに分けて行く作業が基本となる
• ブロック分けは縦→横→縦…の順序に分割していく
  
• ブロックを横に並べるには全体を別ブロックで括る
• 横に並べるブロックは幅を指定するとともにフロートを設定する
  その際には幅の数値の指定に注意する
  
• フロートは解除されるまで有効になるので不要になる箇所でクリアを設定する
• フロートは画像にテキストを回りこませる場合も利用される

子孫セレクタ

• 特定のブロック内でのタグの見栄えを設定する際に使用する
• 同じタグやクラスでもブロック毎に見栄えを変えることが可能
• 新たなクラス名を考える必要がなく適用箇所が特定しやすい
• 例：
  • #header h2
  • #main p img

ブラウザでの確認

• CSSで設定したレイアウトは必ずブラウザで確認する
• Dreamweaverではファイルメニュー＞ブラウザでプレビューを選択する
• ブラウザによって表示が異なる場合があることを認識しておく

評価ポイント

• ブロック分けが正しくできているか？（20点）
• ブロックのスタイル設定が適切にできているか？（20点）
• フロートとクリアの設定が適切に行えているか？（20点）
• 子孫セレクタが適切に使えているか？（20点）
• 効果的なブロックレイアウトができているか？（20点）

HTMLファイルおよびCSSファイルの2ファイルを提出する

ファイル名に全角文字や記号を使わないこと

提出期限は授業日の翌週の月曜日の午後９時まで