My Vector Space

  人生は寄り道してなんぼ

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><!--**************** sidebar おわり ***************-->
 
   
   
    
        <div id="content">
           
             <div id="sub-header">
                    <h1><img src="images-4/title.gif" alt="今月のおすすめ"></h1>
             </div><!--************ sub-header おわり ****************-->
                
             <div id="content-a">   
                     <h2>きのこのオムライス</h2>
                     <p>ふんわりアツアツのオムライスを、きのこたっぷりのデミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円</p>  
             </div><!--*********** content-a おわり ***************-->           
              
              
             <div id="content-b"> 
                    <p id="omuraisu"><img src="images-4/photo01.jpg" alt="きのこのオムライス"></p>
             </div><!--************ content-b おわり *****************-->            
                 
            
             <div id="content-c">  
                   <h2>シーフードスパゲッティシーフードスパゲッティ<br>バルサミコ風味</h2>     
                   <p>エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円</p>
             </div><!--************* content-c おわり ****************-->
   
   
             <div id="content-d">
                   <p id="supa"><img src="images-4/photo02.jpg" alt="スパゲッティ"></p>
             </div><!--*************** content-d おわり ******************-->
   
             <div id="content-e">
                   <p id="coment"><small>(c)2013  卵料理カフェ Cockeyolly</small></p>
             </div><!--************ content-e おわり **************-->
   
        </div><!--************** content 終わり *******************-->
      

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

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

PAGE TOP