html5+css3で基本的なページをつくってみよう！② - nicepaper @ ウィキ

前回のページhtml5+css3で基本的なページをつくってみよう！①に読み込ませたcssを記述していきます。

@charset "utf-8";
/*初期設定*/
body {
margin: 0;
padding: 0;
font-size: x-large;
background-color: white;
}
   
   
/*ページの枠組み*/
#page {
margin: 0 auto;
width: 900px;
height: 700px; 
background-color: #ffffff;
background-color: rgba( 255, 255, 255, 0.55 );   
box-shadow:1px 0px 10px 5px #888888;
}

header {
width: 900px;
height: 50px;
background: #ffff00;
}

nav {
width: 900px;
height: 50px;
background: #00ffff
}

#main {
float: right;
width: 600px;
height: 500px;
background: #ff0000;
}

#sub {
float: left;
width: 300px;
height: 500px;
background: #00ff00;
}

footer {
width: 900px;
height: 100px;
background: #0000ff;
clear: both;
}

まず一番最初に文字コードを指定します。
続いてはbodyについて書いていきます。
margin: 0 auto; は中央揃えという意味です。
marginはボックスの外側の余白であり、paddingはボックスの内側の余白です。
font-sizeやbackground-colorの指定方法は他にも沢山ありますが、ここではそのことについては省略します。
box-shadowはボックスに影をつけるものであり、横方向、垂直方向、ぼかし具合、広がり具合の順に指定していきます。
次は前回のページ(このページの先頭にリンクがあります)html5で作ったブロックにそれぞれ指定をしていきます。widthは横の長さ、heightは縦の長さを示しています。
float: right; float: left;はそれぞれ右左からどれくらいの大きさなのかを指定できるものです。
clear: both;はそれを無効化するものです。


以上