KAWANO's PukiWiki Plus! - 第12回の課題(2)

課題(2): 全体のレイアウトの設定

Webページ全体のレイアウトを、スタイルシートを使って設定します。
「タイトル」「目次」「コメント」「プロフィール」のように、 Webページをいくつかのグループに分割するために、div要素を使います。 そして、CSSファイルにレイアウトのための設定をします。
なお、すでに自分で設定できている場合は、あらためて書き換える必要はありません。

1. HTMLにレイアウトを設定する

次の図のような、目次を左や右に配置するレイアウトを設定します。 説明にしたがって、設定をしてください。

まず、HTMLファイルのbody要素内に、div要素を次のように追加します。 これは、中身を「コンテンツ全体」「タイトル」「目次」「コメント（文章）」「プロフィールと連絡先」の4つのブロックにわけるための設定です。

<div class="all">

<div class="header">
（タイトルの部分）
</div>

<div class="sidebar">
（目次の部分）
</div>

<div class="contents">
（コメント（文章）の部分）
</div>

<div class="footer">
（プロフィールと連絡先の部分）
</div>

</div>

つまり、次のような意味の設定になります。

1. ページ全体に「all」というクラス名のブロックを作る
2. その中に「header」「sidebar」「contents」「footer」というブロックを置く

2. スタイルシートを設定する

(1) CSSファイルの作成

レイアウトの設定が書かれたCSSファイルを作成します。

今回は、新しいCSSファイルを作成します。 ファイル名は、次のとおりです。

• 「0713」+「学籍番号」+「.css」（半角文字で！）
  （学籍番号がC2082000の場合、ファイル名は 「0713c2082000.css」）

(2) スタイルシートの設定

まず、次の設定を追加してください。

• すべてのブロックのmarginとpaddingを0に設定
• 全体のブロックの幅を700pxにする
  （幅は自由に変更してください）
• タイトルのブロックの幅を100%にする（全体のブロックの横幅にする）

.all, .header, .sidebar, .contents, .footer
{
  margin: 0;
  padding: 0;
}
.all {
  width: 700px;
}
.header {
  width: 100%;
}

次に、目次を左右のどちらかに設定します。 今回説明した 幅の設定や左右への配置・回り込みの設定を使います。
目次を左に配置する場合は、次のようにスタイルシートに設定を追加します。

.sidebar {
  float: left;
  width: 200px;
}
.contents {
  float: right;
  width: 500px;
}

これは、次のような意味になります。

• 目次のブロックを左に配置
• 目次のブロックの幅を200pxに指定
  （幅は自由に変更してください）
• コメントのブロックを右に配置（「float: left」を指定しても結果は同じです）
• コメント（文章）のブロックの幅を500pxに指定
  （幅は自由に変更してください）

また、目次を右に配置する場合は、次のようにスタイルシートに設定を追加します。

.sidebar {
  float: right;
  width: 200px;
}
.contents {
  float: left;
  width: 500px;
}

これは、次のような意味になります。

• 目次のブロックを右に配置（その後のブロックは左に配置）
• 目次のブロックの幅を200pxに指定
  （幅は自由に変更してください）
• コメントのブロックを左に配置（「float: right」を指定しても結果は同じです）
• コメント（文章）のブロックの幅を500pxに指定
  （幅は自由に変更してください）

最後に、プロフィールと著作権のブロックに設定をします。

.footer {
  clear: both;
  width: 100%;
}

これは、次のような意味になります。

• 回り込みを解除する（左右へのレイアウトを解除する）
• ブロックの幅を100%にする（全体のブロックの横幅にする）

また、次のようにbody要素と.allクラスへ設定すれば、 全体をセンタリング（中央揃え）することができます。 試してみてください。

body {
  text-align: center;
}
.all {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

注意：
Windows版のInternet Explorer 5.5などでは、「margin-○○: auto」に対応していないため、「text-align: center」でブロックをセンタリングするバグを利用しています。

課題の提出

提出方法

作成したファイルと使用してる画像ファイルすべてを、 次の場所にコピーして提出してください。

• 「マイコンピュータ」→「Fsの資料・課題」→「kawano」→「提出」

提出期限

• 原則として、平成21年7月17日13時までとします。
• 期限以後は、特別な理由がない限り、提出を受け付けません。
• 課題のやりなおしは、提出期限まで受け付けます。