Webデザインのこと、いろいろ

Webデザインにまつわることを自分用にメモしています。

サイト練習：パスタ

サイト練習

パスタとワインの店 atella：完成版にリンク

★ポジションレイアウトを習ったばかりだったので、ポジションで組んでしまったのですが、実際にはフロートなどで組んだ方が安定するのでそうするべき、というコメントをいただいて、ショックをうけました。
ヘッダーについては、画像が重なっているのでz-indexでよいとのことです。

f:id:sankoblog:20160403202243p:plain

<!DOCTYPE HTML>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>パスタとワインの店　atella</title>
<link href="style.css" rel="stylesheet">
</head>

<body>
<div class="container">
<header>
<!--h1の見出しについては画像のaltではなく文字にする！！-->
<h1>パスタとワインの店　atella</h1>
<p><img src="img/mainimage.jpg" alt="ちょっと良いパスタを。鮭とオリーブの実がのったパスタ。"></p>
</header>
<!------------------------------------>
<nav>
<ul>
<li class="concept"><a href="#">concept</a></li>
<li class="pasta"><a href="#">pasta</a></li>
<li class="drink"><a href="#">drink</a></li>
<li class="side"><a href="#">side</a></li>
<li class="access"><a href="#">access</a></li>
</ul>
</nav>
<!------------------------------------>
<div class="menu">
<ul>
<li class="p_menu m_lunch"><a href="#"><img src="img/subimage01.jpg" alt="Lunch　ランチ情報"></a></li>
<li class="p_menu m_pasta"><a href="#"><img src="img/subimage02.jpg" alt="Pasta　パスタ情報"></a></li>
<li class="p_menu m_wine"><a href="#"><img src="img/subimage03.jpg" alt="Wine　ワイン情報"></a></li>
</ul>
</div><!--.menu-->
<!------------------------------------>
<div class="content">
<section class="campain">
<h2><a href="#"><img src="img/campain.png" alt="現在実施中のキャンペーンやお得な情報"></a></h2>

<div class="main_content">
<section class="today">
<h2 class="h2_today penne"><img src="img/todaypastaText.png" alt="Today's Pasta　今日の日替わりパスタ"></h2>
<p class="p_today"><img src="img/todaypasta.jpg" alt="Today's pasta　今日の日替わりパスタ"></p>
<p class="p_penne penne">ペンネアラビアータ<br>（ピリ辛トマトソースのペンネ）</p>
</section><!--.today-->

<section class="news">
<h2 class="h2_news"><img src="img/newsText.png" alt="news"></h2>
<dl>
<dt>2015.9.24</dt>
<dd>今年も冷製パスタをお出しし始めました</dd>
<dt>2015.9.18</dt>
<dd>トマトソースの作成ビデオを公開しました</dd>
</dl>
</section><!--.news-->
</div><!--.main_content-->
<!------------------------------------>
<aside>
<div class="coupon">
<h2><a href="#"><img src="img/coupon.png" alt="クーポン券。ランチセットご注文時ドリンク１杯無料。"></a></h2>
</div><!--.coupon-->
<div class="video">
<p><a href="#"><img src="img/poster.jpg" alt="トマトソースの作り方のビデオ"></a></p>
</div><!--.video-->
</aside>
</div><!--.content-->
<!------------------------------------>
</section><!--.campain-->
</div><!--.container-->
<!------------------------------------>
<footer>
<small>&copy; 2015 atella all right reserved.</small>
</footer>
<!------------------------------------>
</body>
</html>

@charset "UTF-8";
/* CSS Document */

/*reset*/
html,body,h1,h2,h3,h4,ul,li,dl,dt,dd,p {
	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; }
body {
	font-size: 16px;
	background: #FFF url(img/back.jpg);
	}
img {
	border: none;
	vertical-align: bottom;
	}
/*----------------------------------*/
.container {
	width: 980px;
	margin: 0 auto;
	position: relative;
	background: #FFF;
	}
h1 {
	width: 149px;
	height: 87px;
	background: url(img/logo.png) no-repeat;
	position: absolute;
	z-index: 2;
	top: -23px;
	left: 20px;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	}
nav {
	width: 1200px;
	overflow: hidden;
	}
nav li {
	float: left;
	margin-bottom: 30px;
	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;
	}
nav li a {
	display: block;
	width: 196px;
	height: 60px;
	}
li.concept a { background: #FFF url(img/menu_concept.png) no-repeat; }
li.concept a:hover { background: #FFF url(img/menu_concept_h.png) no-repeat; }
li.pasta a { background: #FFF url(img/menu_pasta.png) no-repeat; }
li.pasta a:hover { background: #FFF url(img/menu_pasta_h.png) no-repeat; }
li.drink a { background: #FFF url(img/menu_drink.png) no-repeat; }
li.drink a:hover { background: #FFF url(img/menu_drink_h.png) no-repeat; }
li.side a { background: #FFF url(img/menu_side.png) no-repeat; }
li.side a:hover { background: #FFF url(img/menu_side_h.png) no-repeat; }
li.access a { background: #FFF url(img/menu_access.png) no-repeat; }
li.access a:hover { background: #FFF url(img/menu_access_h.png) no-repeat; }
/*----------------------------------*/	
.menu a:hover { opacity: 0.6; }
.campain a:hover { opacity: 0.6; }
.coupon a:hover { opacity: 0.6; }
.video a:hover { opacity: 0.6; }
/*----------------------------------*/
.content {
	width: 870px;
	padding: 0 55px 40px;
	overflow: hidden;
	}
/*----------------------------------*/
.menu {
	width: 870px;
	margin: 0 auto 20px;
	overflow: hidden;
}
.m_lunch {
	margin-right: 60px;
	float: left;
	}
.m_pasta {
	margin-right: 60px;
	float: left;
	}
.m_wine {
	float: left;
	}
.campain>h2 {
	margin-bottom: 20px;
	box-shadow: 0 0 6px #999;
	}
/*----------------------------------*/
.main_content {
	width: 540px;
	margin-right: 60px;
	float: left;
}
.today {
	width: 538px;
	height: 163px;
	border: 1px solid #E0D7C6;
	margin-bottom: 20px;
	overflow: hidden;
	}
.penne {
	width: 280px;
	float: right;
	}
.h2_today {
	height: 49px;
	margin: 30px 0;
	text-align: center;
	}
.ph_today {
	float: left;
	}
.p_penne {
	width: 280px;
	height: 50px;
	margin-top: -70px;/*この数値で表示されたけれど仕組みがわからない*/
	text-align: center;
	line-height: 1.5;
	font-weight: bold;
	text-shadow: 2px 2px 5px #999;
	}
/*----------------------------------*/
.news {
	width: 538px;
	height: 134px;
	border: 1px solid #E0D7C6;
	background: #FFF url(img/back.jpg);
	}
.h2_news {
	margin: 20px 0 16px 0;
	text-align: center;
	}
dl {
	width: 450px;
	margin: 0 auto;
	}
dt {
	margin-right: 16px;
	line-height: 1.5em;
	clear: left;
	float: left;
	}
dd {
	line-height: 1.5em;
	}
/*----------------------------------*/
aside {
	width: 270px;
	height: 220px;
	float: left;
}
.coupon {
	margin-bottom: 23px;

	}
.video {

	}
/*----------------------------------*/
footer {
	padding: 15px 0;
	text-align: center;
	color: #4B7900;;
	}