「html5+css3で基本的なページをつくってみよう！②」の編集履歴（バックアップ）一覧はこちら

html5+css3で基本的なページをつくってみよう！② - (2015/04/26 (日) 19:53:21) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

さぎほどのページに読み込ませた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;はそれを無効化するものです。~
完成形はこちらです！
#image(right,図3.png)

さぎほどのページに読み込ませた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;はそれを無効化するものです。~
完成形はこちらです！
#image(center, width 300px,図3.png)