My Vector Space

  人生は寄り道してなんぼ

Webデザインスキル強化計画 【 演習課題7 】

***** 演習課題-7 *****

f:id:ooigawa-bitter-sweet:20131011231052g:plain

 

《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:"メイリオ","MS Pゴシック", 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;
          }

 

PAGE TOP