前目次

課題 sandan.html

3段組のページ

タイトル

ここがmenuです。

menuなど

スタイルシート
でレイアウトの
レイアウト例2か3が
参考になるでしょう。

ここがmainです。

3段にする方法

この説明は3段にするのに、tableを使っていますが
課題ではそれぞれの段にしたい部分をdivタグで囲んでid(class)をつけ、
スタイルシートのfloatを使って配置すること。
つまり、
div#id(.class)に対して、
width と
float:left または float:right を指定します。
widthの値は%で指定し、3つ足して100%を越えないようにします。
署名の部分で float が解除されるように clear:both を
指定します。

本文(ページの内容)

内容はウェブページの説明にします。次の項目を入れてください。
構造はjoho.htmlに準じます。

html, head, body ダグの使い方
DOCTYPE の指定の仕方
head部に書く内容の説明(charset, title, style)
body部に書く内容の説明(どのようなものを書くのか)
h1, h2,...と　p タグの役割
ブロックを作るタグと作らないタグ
色の指定
画像の使い方
リスト,テーブルの使い方

3段の具体例(body内部)

<body>
<div class="header">
見出しなどが入る(目次へのリンクとかh1とか)
</div>

<div class="menu">
一段目の内容(メニューとかh2,pなどで構成する)
</div>
<div class="main">
二段目の内容(ウェブページの作り方。h2,pなどで構成する)
</div>
<div class="sub">
三段目の内容(注釈など。h2,pなどで構成する)
</div>

<div class="footer">
下の部分(署名などを入れる。hr, address, pなどで構成する)
</div>
</body>
</html>
この下はない。

3段の具体例(スタイル)

<head>～</head>の間に書きます

最低限必要なものだけ

<style type="text/css">
div.menu {
  float:left;
  width:25%;
}
div.main {
  float:left;
  width:50%;
}
div.sub {
  float:left;
  width:25%;
}

div.footer {
  clear:both;
}
</style>

ここがsubです。

注釈

floatするdivは marginを0にした方がよいでしょう
余白が必要ならdivの中のh1,h2やpなどに margin をつけます。

文章中に<をそのまま書くとタグの扱いをされて消えてしまうことがあります。 <を書く必要が出てきたときには、< と書きます。(little の意味です)

ウェブページ(Oct.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Oct.2010 初稿