読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

Webページ作成 - 実践

先割レイアウト

https://placehold.it/

<img src="http://placehold.it/800x200">

f:id:web-0818:20161028001530j:plain

ナビゲーションは CSS Sprites

ロゴは、Webフォント

fonts.google.com

f:id:web-0818:20161028002243j:plain


マークアップ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CaféStyle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>CaféStyle</h1>
<ul class="gNav">
<li class="home"><a href="#">ホーム</a></li>
<li class="food"><a href="#">カフェフード</a></li>
<li class="drink"><a href="#">カフェドリンク</a></li>
<li class="info this"><a href="#">インフォメーション</a></li>
<li class="company"><a href="#">お問い合わせ</a></li>
</ul>
<p><img src="http://placehold.it/800x200" alt=""></p>
</div><!-- /#header -->
<div id="wrapper">
<div id="content">
<h2>Recommend Menu</h2>
<h3>柿のコンポート ア・ラ・ミニッツ</h3>
<p><img src="img/01.jpg" alt="柿のコンポート ア・ラ・ミニッツ">白ワインのシロップが煮立ったら、生の柿に注ぐ。これを冷めるまで置けば、予熱で絶妙に火が入る。</p>
<h3>プチなシナモンロール</h3>
<p><img src="img/02.jpg" alt="プチなシナモンロール">伸ばしたパン生地に溶かしバターを塗ったらシナモンシュガーをたっぷりふること。手で結びやすくなり、結び目もきちっと決まるポイント。</p>
</div><!-- /#content -->
<div id="sidebar">
<h2>News</h2>
<dl>
<dt>2016年11月4日</dt>
<dd>カフェメニュー レシピ おうちカフェにぴったりの簡単でおしゃれなレシピが満載。</dd>
<dt>2016年11月1日</dt>
<dd>エ毎日の食事からおもてなしの料理まで、プロが教える「間違いなし!」の料理をラインナップ。</dd>
<dt>2016年10月30日</dt>
<dd>カフェメニュー レシピ おうちカフェにぴったりの簡単でおしゃれなレシピが満載。</dd>
</dl>
</div><!-- /#sibebar -->
</div><!-- /#wrapper -->
</div><!-- /#container -->
<div id="footer">
<ul class="footerNav">
<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><small>(c)CaféStyle</small></p>
</div><!-- /#footer -->
</body>
</html>
@charset "utf-8";

/* reset
----------------------------------------*/
html,body,h1,h2,h3,p,ul,li,dl,dt,dd {
  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
----------------------------------------*/
body {
  font-size: 16px;
  background-color: #F4E6AA;
  color: #333;
}

/* layout
----------------------------------------*/
#container {
  width: 800px;
  margin: 20px auto 0 auto;;
  padding: 30px;
  box-shadow: 0 0 6px #AAA;
  background-color: #FFF;
  border-radius: 6px;
}
#header {
  margin-bottom: 30px;
}
#wrapper {
  overflow: hidden;
}
#content {
  float: left;
  width: 530px;
  padding-right: 20px;
  border-right: 1px dotted #AAA;
}
#sidebar {
  float: right;
  width: 230px;
}

/* header
----------------------------------------*/
#header h1 {
  margin-bottom: 20px;
  color: #FFF;
  text-shadow: 0 0 6px #612D1F;
  font-family: 'Quicksand', sans-serif;
  font-size: 40px;
}

/* nav
----------------------------------------*/
#header ul.gNav {
  overflow: hidden;
  height: 50px;
  margin-bottom: 20px;
}
#header li {
  float: left;
}
#header li a {
  display: block;
  width: 160px;
  height: 50px;
  background: url(img/btn.png) no-repeat left top;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}
#header li.home a {
  background: url(img/btn.png) no-repeat 0 0;
}
#header li.home a:hover {
  background: url(img/btn.png) no-repeat 0 -60px;
}
#header li.food a {
  background: url(img/btn.png) no-repeat -160px 0;
}
#header li.food a:hover {
  background: url(img/btn.png) no-repeat -160px -60px;
}
#header li.drink a {
  background: url(img/btn.png) no-repeat -320px 0;
}
#header li.drink a:hover {
  background: url(img/btn.png) no-repeat -320px -60px;
}
#header li.info a {
  background: url(img/btn.png) no-repeat -480px 0;
}
#header li.info a:hover { 
  background: url(img/btn.png) no-repeat -480px -60px;
}
#header li.company a {
  background: url(img/btn.png) no-repeat -640px 0;
}
#header li.company a:hover {
  background: url(img/btn.png) no-repeat -640px -60px;
}
#header li.this a {
  background: url(img/btn.png) no-repeat -480px -60px;
}

/* content
----------------------------------------*/
h2 {
   border: 1px solid #DC8D52;
   margin-bottom: 20px;
   padding: 9px 0 8px 0;
   text-align: center;
   color: #DC8D52;
   font-family: 'Work Sans', sans-serif;
   font-size: 20px;
}
#content h3 {
   clear: both;
   margin-bottom: 12px;
   padding-left: 10px;
   border-left: 10px solid #D4652D;
   line-height: 1.2;
}
#content p {
  line-height: 1.5;
}
#content p img {
   float: right;
   margin: 0 0 20px 20px;
}

/* sidebar
----------------------------------------*/
#sidebar dt {
  margin-bottom: 6px;
  color: #D4652D;
  font-weight: bold;
}
#sidebar dd {
  margin: 0 0 20px 24px;
  line-height: 1.5;
  font-size: 14px;
}

/* footer
----------------------------------------*/
#footer {
  width: 100%;
  height: 120px;
  background-color: #513118;
  color: #FFF;
}
#footer ul.footerNav, #footer p {
  width: 860px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
  font-size: 12px;
}
#footer li {
  display: inline;
  padding: 0 15px 0 10px;
  border-right: 1px solid #FFF;
}
#footer li:first-of-type {
  border-left: 1px solid #FFF;
  padding-left: 15px;
}
#footer li a {
  color: #FFF;
}