div については何も指定しない。 いままでどおりの、h1,h2,ul,pへの指定があるだけ
2段にするポイント
div.menu{
float:left;
width:30%;
}
div.main{
float:left;
width:70%;
}
divに左右のmarginやpaddingやborderがある場合は
うまくいかないことがある。
widthの値を小さくするか、marginなどを0にする。
.mainは、float:right; でもうまくいく。
float をやめたいところの要素に clear を指定する。
div.footer{
clear:both;
}
その他のポイント
menu,mainの内容と周りの間に隙間がほしい時は
h2,p,ulなど、中に入っているタグにmarginやpaddingを指定する。
2段部分を色分けするときは、短い方は指定せず、
bodyの背景色と、mainの背景色で分ける。
周りの隙間はbodyのmargin。
body{margin:0;}
でなくなる。
注
それでもdiv.headerの上下に隙間が空くが、これはicewiasel(firefox)の不具合らしい。
padding:1px 0; を入れる(上下のpaddingが0だと不具合が出る)
または
border:solid 1px 背景色 (背景色は目立たないように指定する)
と改善する
それでもh2とdiv.mainやdiv.menuとの間に隙間があるのはh2にデフォルトでmarginがあるからである。
h2 に margin:0; を指定するとそれがわかる。
div.header に高さが欲しい時には、
内容のh1の上下にmarginかpaddingを広めに指定する。
背景画像が設定されているなら、div.header のheightを画像の高さにあわせて指定してもよい。
2段にするポイント
div.menu{
float:right;
width:30%;
}
div.main{
float:left;
width:70%;
}
.mainは、float:right; でもうまくいく。
float をやめたいところの要素に clear を指定する。
div.footer{
clear:both;
}
その他のポイント
段組レイアウト例1 に書いたことはこちらでも同じ。
div.headerの背景画像と、h1の関係をpaddingで設定する例を示しておく。
普段は%がお勧めだが、ここでpxを使っているのは画像がそもそもpxで大きさがわかっているため。
背景画像を引き伸ばして合わせることが一般化すれば%にしたい所。
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;
}
css1.html を作成し、段組レイアウト例1 のレイアウトをしなさい。内容は、前のページからコピーします。内容そのものを書き換えることなく、styleの部分だけ書いてレイアウトします。
もちろん index.html からのリンクを作成します。目次のリンクは「レイアウト1」という文字列にすること。
css2.html を作成し、段組レイアウト例2 のレイアウトをしなさい。内容は、前のページからコピーします。内容そのものを書き換えることなく、styleの部分だけ書いてレイアウトします。
もちろん index.html からのリンクを作成します。目次のリンクは「レイアウト2」という文字列にすること。
読取り許可をすること。
public_htmlフォルダ内の全ファイルに読み取り許可を与える
chmod go+r public_html/*
public_html/imagesフォルダ内の全ファイルに読み取り許可を与える方法
chmod go+r public_html/images/*