演習課題7

演習課題

実践演習課題H07
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="h07.css">
<title>薬玉文様</title>
</head>
<body>
<div id="container">
<div id="content">
<h1>薬玉文様<span>（くすだまもんよう）</span></h1>
<p>薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。</p>

</div><!-- /content -->
<div id="footer">
<p><small>&copy;2013 Historical Japan</small></p>
</div>
</div><!-- /container -->
</body>
</html>

CSS

@charset "UTF-8";

/*リセット*/
body,h,p,ul,li,img,div,a{
  margin: 0;
  padding: 0;
}

/*全体*/
body{
  font-family: 
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "ＭＳ Ｐ明朝",
    "ＭＳ 明朝",
    serif;
  line-height: 1.6;
  background: url(./img/bg.gif)repeat;
  font-weight: bold;
}

#container{
  width: 640px;
  height: 450px;
  background: #000000 url(./img/image.jpg) no-repeat right top;
  border: 15px solid #000000;
  position:absolute;
  margin: -220px 0 0 -310px;
  top: 50%; 
  left: 50%;
}


/*コンテンツ*/

#content{
  width: 280px;
  padding-left: 20px;
}
h1{
  color: #CCFF66;
  font-size: 22px;
}

h1 span{
  font-size: 16px;
}

#content p{
  color: #FFFFFF;
  padding-top: 10px;
}

/*フッター*/
#footer{
  width: 280px;
  color: #FFFFFF;
  text-align: right;
  padding: 50px 0 0 30px;
}

↓

ポイント
・floatを使うのではなくpositionで画像を指定する
・画像の周りの黒枠はpaddingやmarginではなくborderで作ってしまう
・＜span＞を使うことで文章の1部の文字をサイズをかえたり出来る