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行の高さはフォントサイズの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で独自のレイアウトをしなさい。内容は、前のページからコピーします。内容そのものを書き換えることなく、styleの部分だけ書いてレイアウトします。
もちろん index.html からのリンクと、戻るリンクを作成します。目次のリンクは「レイアウト」という文字列にすること。