背景画像と conteiner の設定
#09 背景を設定しよう
http://dotinstall.com/lessons/website_html/9009
を参考に
背景画像と conteiner を設定していく
まず背景画像の設定について
これは
html{
background-image: url(‘画像ファイル名’);
}
とすることで
画像ファイルを表示できる
ただしわかりにくいため
#container のところへ
background-color:#fff;
として背景色を白にして
box-shadow: 0 0 3px rgba(0,0,0,0.5);
で影をつける
横、縦、ぼかし具合、色
の順番の引数となっている
これだけだと
footer あたりでとまっているので
もうすこし見栄えをよくする
これは
html{
}
の中に
height :100%;
#container の中へ
min-height:100%; height:100%;
を追記
さらに、CSSファイルへ
body{
height:100%;
}
body > #container {
height:auto;
}
を追記する
これで、画面いっぱいまで
#container の領域が増えているのが確認できる
ここまでできたら
menu
contens
などが左によりすぎなのでpadding で余白をつける
この設定は
#container で行う
padding: 0 10px;
として
縦ではなく横に１０px設定する
そして body に対してフォントを指定しておく
font-family: Verdana,Arial;