KAWANO's PukiWiki Plus! - Lecture/JouhouC2007/12th/exercise3 の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2007/12th/exercise3 へ行く。

TITLE:第12回の課題(2)
*課題(2): 全体のレイアウトの設定 [#j85bfa1f]

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


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

#ref(./layout.png,nolink);

まず、HTMLファイルのbody要素内に、div要素を次のように追加します。
これは、中身を「コンテンツ全体」「タイトル」「目次」「コメント（文章）」「プロフィールと連絡先」の4つのブロックにわけるための設定です。
#pre(novervatim){{
&color(red){<div class="all">};

&color(#0099FF){<div class="header">};
（'''タイトルの部分'''）
&color(#0099FF){</div>};

&color(#009999){<div class="sidebar">};
（'''目次の部分'''）
&color(#009999){</div>};

&color(#FF6600){<div class="contents">};
（'''コメント（文章）の部分'''）
&color(#FF6600){</div>};

&color(#0099FF){<div class="footer">};
（'''プロフィールと連絡先の部分'''）
&color(#0099FF){</div>};

&color(red){</div>};
}}

つまり、次のような意味の設定になります。
+ページ全体に「all」というクラス名のブロックを作る
+その中に「header」「sidebar」「contents」「footer」というブロックを置く


**2. スタイルシートを設定する [#w4e25f8b]
***(1) CSSファイルの作成 [#k0543011]
レイアウトの設定が書かれたCSSファイルを作成します。
ファイルは、次のように作成してください。

-「基本」に指定しているファイル（学籍番号.css）をコピーして、
新しいファイルを作成
-ファイル名は、次のとおり
--「学籍番号_12」+「.css」（半角小文字）~
（学籍番号がE2061000の場合、ファイル名は 「''e2061000_12.css''」）
今回は、新しいCSSファイルを作成します。
ファイル名は、次のとおりです。
-「0626」+「学籍番号」+「.css」（半角文字で！）~
（学籍番号がC2062000の場合、ファイル名は 「''0626c2062000.css''」）


***(2) スタイルシートの設定 [#x02f6516]
まず、次の設定を追加してください。
-すべてのブロックのmarginとpaddingを0に設定
-全体のブロックの幅を700pxにする&br;（幅は自由に変更してください）
-タイトルのブロックの幅を100%にする（全体のブロックの横幅にする）

#pre(novervatim){{
.all, .header, .sidebar, .contents, .footer
{
  margin: 0;
  padding: 0;
}
.all {
  width: 700px;
}
.header {
  width: 100%;
}
}}

次に、目次を左右のどちらかに設定します。
[[今回説明した>2006/12th]]
[[今回説明した>Lecture/JouhouC2007/12th]]
幅の設定や左右への配置・回り込みの設定を使います。&br;
目次を左に配置する場合は、次のようにスタイルシートに設定を追加します。
#pre(novervatim){{
.sidebar {
  float: left;
  width: 200px;
}
.contents {
  float: right;
  width: 500px;
}
}}
これは、次のような意味になります。
-目次のブロックを左に配置
-目次のブロックの幅を200pxに指定&br;（幅は自由に変更してください）
-コメントのブロックを右に配置（「float: left」を指定しても結果は同じです）
-コメント（文章）のブロックの幅を500pxに指定&br;（幅は自由に変更してください）

また、目次を右に配置する場合は、次のようにスタイルシートに設定を追加します。
#pre(novervatim){{
.sidebar {
  float: right;
  width: 200px;
}
.contents {
  float: left;
  width: 500px;
}
}}
これは、次のような意味になります。
-目次のブロックを右に配置（その後のブロックは左に配置）
-目次のブロックの幅を200pxに指定&br;（幅は自由に変更してください）
-コメントのブロックを左に配置（「float: right」を指定しても結果は同じです）
-コメント（文章）のブロックの幅を500pxに指定&br;（幅は自由に変更してください）

最後に、プロフィールと著作権のブロックに設定をします。
#pre(novervatim){{
.footer {
  clear: both;
  width: 100%;
}
}}
これは、次のような意味になります。
-回り込みを解除する（左右へのレイアウトを解除する）
-ブロックの幅を100%にする（全体のブロックの横幅にする）

また、次のようにbody要素と.allクラスへ設定すれば、
全体をセンタリング（中央揃え）することができます。
試してみてください。
#pre(novervatim){{
body {
  text-align: center;
}
.all {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
}}

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

**課題の提出 [#v4392dfb]
***提出方法 [#pd69905b]
作成したファイルと''使用してる画像ファイルすべて''を、
次の場所にコピーして提出してください。
-「マイコンピュータ」→「Fsの資料・課題」→「kawano」→「提出」

----

&color(red){まだまだまだ提出ではありません};。
&navi2(2006/12th,next);に進んでください。
***提出期限 [#h518caec]
-原則として、''平成19年7月3日13時''までとします。
-期限以後は、特別な理由がない限り、提出を受け付けません。
-課題のやりなおしは、提出期限まで受け付けます。

&br;
----
#navi2(2006/12th,prev,toc,next)
#navi2(Lecture/JouhouC2007/12th,prev,toc,next)

}}