96's blog

WEBサイト制作科 6ヶ月コース

実践演習課題H07C07

HTML

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>H07C07</title>
<linkrel="stylesheet"href="css/H07C07.css"media="all">
</head>
<body>
<divid="container">
<h1>薬球文様span class="synIdentifier"><span>(くすだまもんよう)</span></h1>
<P>
薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。
</P>
<pid="footer">
<small>&copy; 2013 Historical Japan</small>
</p>
</div>
</body>
</html>

CSS

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

body, div, h1, p{
  margin: 0;
  padding: 0;
}
body {
  font-family:
    "ヒラギノ明朝 ProN",
    "HG明朝E",
    "MS P明朝",
    "MS 明朝",
    serif;
  color: #ffffff;
  font-weight: 500;
  background: url(../img/07/bg.gif) repeat;
}
#container{
  width: 650px;
  height: 459px;
  margin: 40px auto;
  border: 18px  solid #000000;
  background: #000000 url(../img/07/image.jpg) no-repeat top right;
}
h1 {
  width: 300px;
  font-size: 20px;
  color:#FF0;
  margin: 15px 0 20px 18px;
}
span {
  font-size: 16px;
  letter-spacing: 2px;
}
p {
  width: 300px;
  line-height: 1.8em;
  margin: 0 0 0 18px;
}
p#footer{
  color: #c0c0c0;
  width: 300px;
  margin-top: 90px;
  text-align: right;
}

f:id:webtm2013:20130801145217p:image