19日目 画面を広く見せる
photoshopで背景画像をつくる
画面の端が切れていることによってその先にもページが続いているように見せる。
画面を広く見せる効果がある
画面内に全てが収まっていると小さく見え、古臭くみえる。
デザインを考えていく上で大切な考え方。
html-------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>卵料理カフェ Cockeyolly</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="side">
<h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="index.html" class="this">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="#">メール</a></li>
</ul>
</div><!--#side-->
<div class="main">
<h2><img src="img/title.gif" alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<div class="wrapper">
<p><img src="img/photo01.jpg" alt="きのこのオムライス">
ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。<span>800円</span></p>
</div><!--wrapper-->
<h3>シーフードスパゲッティ<br>
バルサミコ風味</h3>
<div class="wrapper">
<p><img src="img/photo02.jpg" alt="シーフードスパゲッティバルサミコ風味">
エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。<span>900円</span></p>
</div><!--wrapper-->
</div><!--#main-->
</div><!--container-->
<div class="footer">
<p><small>(c)2014 卵料理カフェ Cockeyolly</small></p>
</div><!--footer-->
</body>
</html>
----------------------------------------------------------------------------------------
stylesheet--------------------------------------------------------------------------
@charset "UTF-8";
/* reset */
html, body, div, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
border: none; vertical-align: bottom;
}
body {
font-size:16px;
background: url(img/bg_body.png) repeat-y #FFF;
}
.container {
width:700px;
overflow:hidden;
}
.side {
width: 120px;
float:left;
margin:20px;
}
.main {
width: 500px;
float: right;
padding-top: 50px;
}
.side h1 {
margin: 0 0 50px 10px;
}
.nav li {
font-weight: bold;
margin-bottom: 20px;
}
.nav li a {
color: #FFF;
}
.nav li a:hover,.nav a.this {
color: #FF6;
}
.main h2 {
text-align: center;
margin-bottom: 50px;
}
.main h3 {
margin-bottom: 10px;
padding-left: 10px;
border-left: 8px solid #F90;
line-height: 1.5;
color: #630;
}
.wrapper {
overflow: hidden;
margin-bottom: 70px;
}
p img {
float:right;
margin-left: 20px;
}
p {
float: left;
line-height: 1.5;
}
span {
color: #C00;
font-weight: bold;
}
.footer {
border-top: 2px solid #999;
width: 500px;
margin-left: 200px;
padding: 10px;
}
.footer p {
margin-left: 150px;
padding-bottom: 10px;
}
-------------------------------------------------------------------------
昨日のテストと同じく＃footerを＃containerの外にした
もし＃containerの中に入れるとしたら#footerにclear:を入れる。
