webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

演習 卵料理 カフェ

  • 卵料理カフェ
  • 道は険しい。時間がかかりすぎだ。きょうはこれまで。
  • p要素は2次元空間でどのように広がっているのか?まだわかっていない.…
  • ミスタイプでハマるケースが多すぎる。

 

html, body, h1, h2, h3, ul, li, footer{
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
body {
font-size: 16px;
background: #FFFFEE;
padding: 10px 0 10px 0;
}

ul, li{
list-style-type: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
}

/*reset
-----------------------------------------------------*/
#container{
width: 720px;
margin: 0 auto;
overflow: hidden;
background: #FFFFFF;
overflow: hidden;
}
#sideNav{
background:url(img/bg_img.gif) repeat-y 0 0;
width: 160px;
height: 650px;
float: left;
}
h1{
margin: 24px 0 0 24px;
}
ul{
margin:50px 0 0 16px;
}
li a{
display: block;
line-height: 2.0;
color: #FFFFFF;
font-weight: bold;
}
li a:hover{
color: #FDEA02;
}

/*sideNav
-------------------------------------------------------*/
#content{
width: 560px;
float: right;
overflow: hidden;
}
h2{
text-align: center;
margin: 50px 0 64px 0;
}
h3{
border-left: 12px solid #f09100;
margin-left:24px;
padding-left: 10px;
}
#mashroom, #seafood{
overflow: hidden;
margin-bottom: 24px;
}
.photo{
width: 185px;
float: right;
margin-right: 24px;
}
.text{
width: 300px;
float: left;
margin-left: 24px;
}
#footer{
width: 560px;
text-align: center;
border-top: dotted 1px #999999;
}