カラムレイアウト - WEBサイト制作の勉強

1カラムレイアウト

f:id:yachin29:20160315134848j:plain

2カラムレイアウト

2カラムレイアウトの場合、floatを使い、div要素を横に並べます。
ここで一番大事なのはHTMLの文章構造を変える事無く、CSSでレイアウトしていく事です。
floatを使う事でHTML内の文章構造を変える事なく比較的自由なレイアウトが作れるようになります。
なのでfloatの特性をしっかり理解し、文章構造を変える事なくレイアウトを作ってみましょう。

f:id:yachin29:20160315135927j:plain

HTMLソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2カラムレイアウト</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<header>header</header>

<div id="wrapper">
<div id="main">main</div>
<div id="sub">sub</div>
</div>

<footer>footer</footer>
</div>
</body>
</html>

CSSファイル

@charset "utf-8";
/* CSS Document */
html, body, div, header, footer {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
  color: #222;
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*レイアウト*/
body {
  background: #999;
}
div#container {
  width: 780px;
  background: #FFF;
  padding: 10px;
  margin: 0 auto;
}
header {
  height: 300px;
  background: #F90;
  margin-bottom: 10px;
}
#wrapper {
  overflow:hidden;
}
#main {
  width: 500px;
  height: 400px;
  background: #0CC;
  margin-bottom: 10px;
  float: left;
}
#sub {
  width: 270px;
  height: 400px;
  background: #6C3;
  margin-bottom: 10px;
  float: right;
}
footer {
  height: 100px;
  background: #F3F;
}