webプログラミング講座 10日目

9月がスタート

プログラミング講座も10日目ですが、ペースが早く付いて行くのがやっとです。

 

★今日はレイアウト(ブロックの構成)の理解

★フロートの挙動を理解

 

分ったような分らないような感じです。理屈は理解出来ているので良しのしましょう!(汗

ホームページの枠組みの仕組みですのでしっかり理解しとかないときれいなサイト作りが出来なくなりますよね!

まだまだ、サイトを作れるレベルではありませんが、少しづつ前進あるのみ!

 

9月1日の月曜日から雨でブルーな月になりそう!

 

HTMLファイル

<!DOCTYPE html>
<html lang”ja”>
<head>
<meta charset”=”utf-8″>
<title></title>
<meta name=”author”content”">
<meta name=”description” content=”">
<meta name=”keywords”content”">
<link rel=”stylesheet” href=”01_boxmodel.css”>
<style></style>
</head>
<body>
<div id=”all”>
<div>ひだり</div>
<div>真ん中</div>
<div>みぎ</div>
</div>
</body>
</html>

 

CSSファイル

@charset “utf-8″;
#all {
border:1px solid gray;
width:300px;
overflow:hidden;
}
#all .left {
border:1px solid red;
width:100px;
float:left;
padding:5px;
box-sizing:border-box;
}
#all .center {
border:1px solid green;
width:100px;
float:left;
padding:5px;
box-sizing:border-box;
}
#all .right {
border:1px solid blue;
width:100px;
float:left;
padding:5px;
box-sizing:border-box;
}