WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

Floatの演習

ソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>私の好きな本3冊</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<h1>私の好きな本3冊</h1>
<div class="box">
<h2>新平家物語</h2>
<p class="ph"><img src="img/01b.jpg" height="300" alt="#"></p>
<dl class="data">
<dt>作者:</dt><dd>吉川英治</dd>
<dt>出版社:</dt><dd>新潮社</dd>
<dt>金額:</dt><dd>709円</dd>
</dl>
</div><!--/.box-->

<div class="box">
<h2>沈黙</h2>
<p class="ph"><img src="img/04b.jpg" height="300" alt="#"></p>
<dl class="data">
<dt>作者:</dt><dd>遠藤周作</dd>
<dt>出版社:</dt><dd>新潮社</dd>
<dt>金額:</dt><dd>594円</dd>
</dl>
</div><!--/.box-->

<div class="box">
<h2>エデンの東</h2>
<p class="ph"><img src="img/08b.jpg" height="300" alt="#"></p>
<dl class="data">
<dt>作者:</dt><dd>ジョン・スタインベック</dd>
<dt>出版社:</dt><dd>早川出版</dd>
<dt>金額:</dt><dd>842円</dd>
</dl>
</div><!--/.box-->
</div><!--/#container-->
</body>
</html>


スタイルシート

@charset "utf-8";
/* CSS Document */

html, body, h1, h2, p, dl, dt, dd {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  line-height: 1.0;
}
body {
  background-color: #CCC;
}
#container {
  width: 800px;
  margin: 0 auto;
}
h1 {
  text-align: center;
  padding: 40px 0;
}
.box {
  background: #FFF;
  margin-bottom: 40px;
  overflow: hidden;
}
h2 {
  padding: 20px 0 0 20px;
}
p.ph {
  float: left;
  margin-right: 50px;
}

dl.data {
  width: 500px;
  margin-top: 20px;
}
dt {
  float: left;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 20px 0
}
dd {
  font-size: 18px;
  margin-bottom: 20px;
}
広告を非表示にする