<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レイアウト</title>
<style>
body,div {
margin: 0;
padding: 0;
}
ul{
width: 100px;
}
li{
height: 78px;
padding: 1px;
list-style-type: none;
}
#new{
background: #FF0000;
}
#info{
background: #FFA300;
}
#item{
background: #97C500;
}
#shop{
background: #01C823;
}
#company{
background: #7CCFED;
}
a{
display: block;
width: 98px;
height: 78px;
text-align: center;
line-height: 78px;
color: white;
}
a:hover{
background: white;
}
#new a:hover{
color: #FF1B00;
}
#info a:hover{
color: #FFA300;
}
#item a:hover{
color: #97C500;
}
#shop a:hover{
color: #01C823;
}
#company a:hover{
color: #7CCFED;
}
</style>
<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>
