Webデザインスキル強化計画 【 演習課題7 】
***** 演習課題-7 *****
《html》
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>課題-7</title>
<link rel="stylesheet" href="kadai-7.css">
</head>
<body>
<div id="container">
<div id="content">
<h1>薬玉文様（くすだまもんよう）</h1>
<p>薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。</p>
<address>c2013 Historical Japan</address>
</div><!--*****content おわり *****-->
<div id="content-2">
<img src="images-7/image.jpg" alt="" width="308" height="459">
</div><!--content-2 終わり *******-->
</div><!--*********** container おわり *************-->
</body>
</html>
《css》
@charset "utf-8";
/* CSS Document */
/* css reset */
/* ///// IE6対策です //// */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
body {
font-family:"メイリオ","ＭＳ Ｐゴシック", Tahoma, Arial, sans-serif;
line-height: 1.7;
color: #333;
font-size: 14px;
text-align: left;
}
body{
background-image: url(images-7/bg.gif);
}
#container{
width:616px;
height:459px;
background-color:#000;
margin: 0 auto;
padding:20px;
}
#content{
width:288px;
height:459px;
float:left;
}
#content-2{
width:308px;
height:459px;
float:right;
}
h1{
color:#FF0;
font-size:20px;
margin-bottom:20px;
}
p{
color:#FFF;
}
address{
color:#FFF;
float:right;
margin-top:178px;
}
