WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

2カラムレイアウト

f:id:mmmmofu:20160921033351j:plain

http://efu.sakura.ne.jp/web/egg/

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">    
<title>卵料理カフェ Cockeyolly</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="sidebar">
<h1><img src="img/logo.gif" alt="卵料理カフェ Cockeyolly"></h1>

<ul>
<li>Home</li>
<li>ニュース</li>
<li>メニュー</li>
<li>今月のおすすめ</li>
<li>オリジナル雑貨</li>
<li>マップ</li>
<li>メール</li>
</ul>
</div><!-- /#sidebar -->
<div id="content">
<h2><img src="img/title.gif" alt="今月のおすすめ"></h2>

<h3>きのこのオムライス</h3>

<p><img src="img/photo01.jpg" alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。:800円</p>


<h3>シーフードスパゲッティ<br>
バルサミコ風味</h3>

<p><img src="img/photo02.jpg" alt="シーフードスパゲッティバルサミコ風味">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。:900円</p>
</div><!-- /content -->
<div id="footer">
<p><small>(c)2014  卵料理カフェ Cockeyolly</small></p>
</div><!-- /#footer -->
</body>
</html>

CSS

@charset "UTF-8";

/* reset */
html,body,div,h1,h2,h3,p,ul,li,small {
  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: url(img/bg_img.gif) repeat-y left top;
}

/* layout */
#sidebar {
  float: left;
  width: 150px;
  text-align: center;
  margin: 18px 30px 0 0;
}
#sidebar h1 {
  margin-bottom: 50px;
}
#sidebar ul {
  text-align: left;
  margin-left: 15px;
}
#sidebar li {
  font-weight: bold;
}
#sidebar li a {
  disply: block;
  line-height: 2.0;
  color: #FFF;
}
#sidebar li a:hover {
  color: #FFF783;
}
#content {
  float: left;
  width: 500px;
  margin-top: 46px;
}
#content h2 {
  margin-bottom: 50px;
  text-align: center;
}
#content h3 {
  clear: right;
  margin-bottom: 10px;
  line-height: 1.2;
  color: #754531;
  barder-left: 10px solid #D38500;
  padding-left:8px;
}
#content p {
  line-height: 1.5;
}
#content p img {
  floot: right;
}
#nav {
  float: left;
    
}
#footer {
  clear: both;
  margin-left: 170px;
}

重要なコンテンツを先に記述したほうがSEO的に良い。