支援訓練 29日目

IE対策

<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="container">
<header>
<h1>章見出し</h1>
<p>テーマのキーワードを含むリード文</p>
<nav>
<ul>
  <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><!-- /header -->

<div id="content">
<section>
<h2>節見出し</h2>
<p>テーマのキーワードを含むリード文</p>
<section>
<h3>項目１</h3>
<p>本文１本文１本文１</p>
<aside>
<h4>補足説明</h4>
<p>本文本文本文本文本文</p>
</aside>
</section>
</section>
</div><!-- /#content -->

<div id="sidebar">
<section>
<h3>項目２</h3>
<p>本文２本文２本文２</p>
</section>
</div><!-- /#sidebar -->

<footer>
<p>(c)2013 WebDesign</p>
</footer>
</div><!-- /#containerr -->
</body>
</html>

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>管理ページ(トップ)</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="container">
<div id="header">
<h1>Webサイト制作学習記録</h1>
<p>Webサイト制作学習記録</p>
</div>
<div id="nav">
<ul>
<li><a href="cakesite/products.html">ケーキショップ</a></li>
</ul>
</div>
<div id="contents">
<dl>
<dt>ケーキショップ</dt>
<dd><a href="cakesite/products.html"><img src="img/cakeshop_thum.jpg" style="float: left"></a>平成13年8月制作</dd>
</dl>
</div>
<div id="footer">
支援訓練&nbsp;Webサイト制作
</div>
</div>
</body>
</html>

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

body, div, ul, li, dl, dt, dd, a{
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
ul {
  list-style:none;
}
body {
  background: #CCC;
}
#container {
  width: 800px;
  background: #FFF;
  margin: 0 auto;
  padding: 10px;
  overflow: hidden;
}
#header {
  width: 800px;
  height: 235px;
  padding:10px;
  background: url(../img/header.jpg) no-repeat;
}
#header p {
  color: #FFF;
}
#nav {
  width: 300px;
  float: right;
}
#contents {
  width: 500px;
  float: left;
  text-indent: 1em;
}
dt {
  background: #FC3;
}
#footer {
  text-align:center;
  clear: both;
}