レイアウト解説

レイアウト例をいくつか

普通のテキスト

div については何も指定しない。
いままでどおりの、h1,h2,ul,pへの指定があるだけ

レイアウト例２

div.menu{
  float:left;
  width:30%;
}
div.main{
  float:left;
  width:70%;
}

divに左右のmarginやpaddingやborderがある場合は
うまくいかないことがある。
widthの値を小さくするか、marginなどを0にする。

.mainは、float:right; でもうまくいく。

menu,mainの内容と周りの間に隙間がほしい時は
h2,p,ulなど、中に入っているタグにmarginやpaddingを指定する。

float をやめたいところの要素に clear を指定する。
div.footer{
  clear:both;
}

レイアウト例３

div.menu{
  float:right;
  width:30%;
}
div.main{
  float:left;
  width:70%;
}

div.header{
  background:#ffcccc url(images/hana.jpg);
}
h1 {
  margin:0;
  font-size:80px;
  padding: 30px 0 70px 0;
}

１行の高さはフォントサイズの1.2倍ぐらいになるので
　h1の高さは30+80*1.2+70=196px程度になる。

レイアウト例４

body {
  background:#ccccff url(images/sora.jpg);
  margin:0;
  }
ul{
  margin:0 auto;
  padding: 0;
}
li {
  list-style-type:none;
  float:left;
  width:168px;
  height:32px;
  padding:15px 0 0 0;
  font-size:14px;
  text-align:center;
  background-image:url(images/kumoalpha.png)
  background-repeat:no-repeat;
}  

課題　css.html

css.html を作成し、cssで独自のレイアウトをしなさい。内容は、前のページからコピーします。内容そのものを書き換えることなく、styleの部分だけ書いてレイアウトします。

もちろん index.html からのリンクと、戻るリンクを作成します。目次のリンクは「レイアウト」という文字列にすること。