復習④

授業　復習 


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタン</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>
</body>
</html>

@charset"UTF-8";
/* リセット */
body, div, ul, li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

/* 全体 */ 
body {
  font-size: 18px;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul{
  margin: 50px 0 0 50px;
  width: 120px;
  text-align: center;
  font-weight: bold;
}
li a{
  color: #fff;
  display: block;
  padding: 25px 0;
}
li#new a{
  background-color: red;
  border: 1px solid red;
}
li#new a:hover, li#new a:active{
  background-color: #fff;
  color: red;
}
li#info a{
  background-color: orange;
  border: 1px solid orange;
}
li#info a:hover, li#info a:active{
  background-color: #fff;
  color: orange;
}
li#item a{
  background-color: limegreen;
  border: 1px solid limegreen;
}
li#item a:hover, li#item a:active{
  background-color: #fff;
  color: limegreen;
}
li#shop a{
  background-color: lawngreen;
  border: 1px solid lawngreen;
}
li#shop a:hover, li#shop a:active{
  background-color: #fff;
  color: lawngreen;
}
li#company a{
  background-color: skyblue;
  border: 1px solid skyblue;
}
li#company a:hover, li#company a:active{
  background-color: #fff;
  color: skyblue;
}