確認テスト　５月２７日（講師日和）

CSS

基本
http://web-study.lolipop.jp/felica/issues/0527test_1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>0527確認テスト：基本</title>
<style type="text/css">

* {
  margin: 0;
  padding: 0;
}
#container {
  margin: 10px;
  width: 800px;
  height: 600px;
  background-color: gray;
  margin: 10px auto;
}
#header {
  background-color: cyan;
  height: 120px;
}
#nav {
  overflow: auto;
}
ul {
  list-style-type: none;
}
li {
  float: left;
}
li a {
  display: block;
  height: 60px;
  width: 160px;
}
#nav1 a{
  background-color: pink;
}
#nav2 a{
  background-color: #0295ff;
}
#nav3 a{
  background-color: #4cff20;
}
#nav4 a{
  background-color: #ffe43f;
}
#nav5 a{
  background-color: #ff4a2f;
}
#nav1 a:hover {
  background-color: black;
}
#nav2 a:hover {
  background-color: black;
}
#nav3 a:hover {
  background-color: black;
}
#nav4 a:hover {
  background-color: black;
}
#nav5 a:hover {
  background-color: black;
}
#nav1 a:active {
  background-color: #fff;
}
#nav2 a:active {
  background-color: #fff;
}
#nav3 a:active {
  background-color: #fff;
}
#nav4 a:active {
  background-color: #fff;
}
#nav5 a:active {
  background-color: #fff;
}
#wrapper {
  overflow: auto;
}
#content {
  background-color: green;
  width: 600px;
  height: 360px;
  float: right;
}
#sidebar {
  background-color: yellow;
  width: 200px;
  height: 360px;
  float: left;
}
#footer {
  background-color: red;
  height: 60px;
  overflow: auto;
}


</style>
</head>
<body>
<div id="container">
  <div id="header">
  </div>
  
  <div id="nav">
    <ul>
    <li id="nav1"><a href="#"></a></li>
    <li id="nav2"><a href="#"></a></li>
    <li id="nav3"><a href="#"></a></li>
    <li id="nav4"><a href="#"></a></li>
    <li id="nav5"><a href="#"></a></li>
    </ul>
  </div>
  
  <div id="wrapper">
    <div id="content">
    </div>
  
    <div id="sidebar">
    </div>
  </div>
  
  <div id="footer">
  </div>

</div>

</body>
</html>


応用
http://web-study.lolipop.jp/felica/issues/0527test_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/0527.css" type="text/css" media="screen,print">
<title>0527確認テスト：応用</title>
</head>

<body>
<div id="container">
    <div id="header">
    header
    </div>
  
    <div id="nav">
      <ul>
      <li><a href="#">Nav1</a></li>
      <li><a href="#">Nav2</a></li>
      <li><a href="#">Nav3</a></li>
      <li><a href="#">Nav4</a></li>
      <li class="li2"><a href="#">Nav5</a></li>
      </ul>
    </div>
  
    <div id="wrapper">
      <div id="content">
      content
      </div>
  
      <div id="sidebar">
      sidebar
      </div>
    </div>
    
    <div id="footer">
    footer
    </div>
  
</div>

</body>
</html>

@charset "UTF-8"

a{}

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: gray;
  padding: 20px;
}
#container {
  background-color: #fff;
  width: 800px;
  height: 600px;
  overflow: auto;
  padding: 10px;
  margin: 0 auto;
}
#header {
  background-color: blue;
  height: 120px;
  width: 800px;
  
  font-size: 4em;
  color: #fff;
  text-align: center;
  line-height: 120px;
}
#nav {
  overflow: auto; /*ここで詰まった。入れないとフッターが回りこんでしまう*/
  padding-bottom: 10px;
  margin-top: 10px;
}
ul {
  list-style-type: none;
  }
li {
  float: left;
  text-align: center;
  line-height: 60px;
  font-size: 1.5em;
  padding-right: 5px;
}
li a {
  display: block;
  height: 60px;
  width: 156px;
  background-color: red;
  color: #Fff;
  text-decoration: none;
}
li a:hover {
  background-color: #ff66bb;
}
li a:active {
  background-color: #ffc7eb;
}
.li2 {
  padding-right: 0;
}
#wrapper {
  background-color: coral;
  overflow: hidden;　/*ここを入れないと回りこんでしまう。*/
}
#content {
  width: 600px;
  height: 330px;
  background-color: green;
  float: right;
  
  text-align: center;
  line-height: 300px;
  font-size: 3em;
  color: #fff;
}
#sidebar {
  width: 200px;
  height: 330px;
  background-color: #dedc2b;
  float: left;
  
  text-align: center;
  font-size: 3em;
  line-height: 300px;
  color: #fff;
}
#footer {
  background-color: #6106a3;
  height: 60px;
  
  color: #fff;
  line-height: 60px;
  text-align: center;
  font-size: 3em;
  margin-top: 10px;
}