演習１
使用するテキスト
卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：800円 シーフードスパゲッティバルサミコ風味 エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：900円 ©2019 卵料理カフェ Cockeyolly
使用画像
http://felica29.starfree.jp/cockeyolly-img.zip
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>卵料理カフェ Cockeyolly</title>
<style>
html,body,h1,h2,h3,p,ul,li{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
vertical-align: bottom;
}
.container{
width: 800px;
overflow: hidden;
}
header{
width: 200px;
height: 100vh;
padding-top: 100px;
box-sizing: border-box;/*borderとpaddingが内側に入る*/
background: url(img/bg.png)repeat-y;
float: left;
}
h1{
width: 82px;
height: 78px;
background: url(img/logo.gif)no-repeat;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
margin: 0 auto 50px;
}
.g-nav{
padding-left: 20px;
}
.g-nav li{
margin-bottom: 6px;
}
.g-nav a{
display: block;
padding: 6px 0;
color: #FFF;
}
.g-nav a:hover{
color:bisque;
text-decoration: underline;
}
.main{
width: 600px;
float: right;
}
h2{
text-align: center;
padding: 30px 0;
}
.food{
padding-left: 40px;
margin-bottom: 40px;
overflow: hidden;
}
h3{
border-left:10px solid #a05308;
padding-left: 20px;
margin-bottom: 20px;
}
.food img{
float: right;
margin-left: 20px;
}
.price{
color: #F00;
font-weight: bold;
}
footer{
border-top: 2px solid #AAA;
padding-top: 20px;
}
footer>p{
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>卵料理カフェ Cockeyolly</h1>
<nav class="g-nav">
<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>
</nav>
</header>
<div class="main">
<h2><img src="img/title.gif" alt=""></h2>
<div class="food">
<h3>きのこのオムライス</h3>
<p><img src="img/photo01.jpg" alt="">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span class="price">800円</span></p>
</div>
<div class="food">
<h3>シーフードスパゲッティバルサミコ風味</h3>
<p><img src="img/photo02.jpg" alt="">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span class="price">900円</span></p>
</div>
<footer>
<p><small>©2019 卵料理カフェ Cockeyolly</small></p>
</footer>
</div><!--/.main-->
</div><!--/.container-->
</body>
</html>
コメント