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

* 演習課題-4 *

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

《html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初心者課題-4</title>
<link rel="stylesheet" href="kadai-4.css">
</head>

<body>

<div id="container">


     <div id="sidebar">

            <p id="main-logo"><img src="images-4/logo.gif" alt="メインロゴ"></p>
            <p></p>
            <p>
                <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">ニュース</a></li>
                  <li><a href="#">メニュー</a></li>
                  <li><a href="#">今月のおすすめ</a></li>
                  <li><a href="#">オリジナル雑貨</a></li>
                  <li><a href="#">マップ</a></li>
                  <li><a href="#">メール</a></li>
                </ul>
            </p>

        </div>




        <div id="content">

             <div id="sub-header">
                    <h1><img src="images-4/title.gif" alt="今月のおすすめ"></h1>
             </div>

             <div id="content-a">
                     <h2>きのこのオムライス</h2>
                     <p>ふんわりアツアツのオムライスを、きのこたっぷりのデミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円</p>
             </div>


             <div id="content-b">
                    <p id="omuraisu"><img src="images-4/photo01.jpg" alt="きのこのオムライス"></p>
             </div>


             <div id="content-c">
                   <h2>シーフードスパゲッティシーフードスパゲッティ<br>バルサミコ風味</h2>　
                   <p>エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円</p>
             </div>


             <div id="content-d">
                   <p id="supa"><img src="images-4/photo02.jpg" alt="スパゲッティ"></p>
             </div>

             <div id="content-e">
                   <p id="coment"><small>(c)2013 卵料理カフェ Cockeyolly</small></p>
             </div>

        </div>

</div>

</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;
     }

#container{
           width:700px;
           height:700px;
           background-color:#FFF
           margin:0 auto;
           border:solid 2px #6FF;
        }

#sidebar{
         float:left;
         background-image:url("images-4/bg_img.gif");
         width:159px;
         height:700px;
    }

#main-logo{
          margin-top:20px;
        }

ul{
    margin-top:50px;
}

li{
   margin-left:20px;
   line-height:25px;
}

a{
font-weight:600;
text-decoration: none;
color:#FFF;
}

#content{
        float:right;
        width:541px
       }

h1{
    text-align:center;
   }

#content-a{
         width:300px;
         float:left;
       }

#content-b{
         float:right;
         margin-top:40px;
      }

#omuraisu{
          margin-right:25px;
          margin-top:45px;
       }

h2{
   font-size:18px;
   font-weight:bold;
   border-left:7px solid #F30;
   margin-left:20px;
   margin-top:50px;
}

p{
margin-left:20px;
font-weight:600;
}

#content-c{
        clear:both;
        width:300px;
        float:left;
    }

#content-d{
           float:right;
           margin-right:45px;
           width:185px;
           height:130px;
           margin-top:165px;
           margin-bottom:70px;
      }

#content-e{
          background-color:#FFF;
          clear:both;
          width:491px;
          height:50px;
          margin-top:50px;
          border-top:solid 2px #6FF;
          margin-left:20px;
      }

#coment{
text-align:center;
}

My Vector Space

人生は寄り道してなんぼ

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

* 演習課題-4 *

***** 演習課題-4 *****

* 演習課題-4 *