<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーションボタンの作成</title>
<style>
html,body,ul,li {
margin:0;
padding:0;
}
ul {
list-style:none;
}
a {
text-decoration:none;
color:#222;
}
.g-nav>ul {
display:flex;
width:800px;
margin:50px auto 0;
}
.g-nav li {
width:200px;
height:50px;
}
li>a {
display:block;
background:#BFBFBF url(img/01.jpg) no-repeat;
line-height:50px;
text-align:center;
border-right:1px solid #FFF;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
li:nth-child(2)>a {
background:#BFBFBF url(img/02.jpg) no-repeat;
}
li:nth-child(3)>a {
background:#BFBFBF url(img/03.jpg) no-repeat;
}
li:nth-child(4)>a {
background:#BFBFBF url(img/04.jpg) no-repeat;
}
li>a:hover {
background:#F39495 url(img/01h.jpg) no-repeat;
}
li:nth-child(2)>a:hover {
background:#F39495 url(img/02h.jpg) no-repeat;
}
li:nth-child(3)>a:hover {
background:#F39495 url(img/03h.jpg) no-repeat;
}
li:nth-child(4)>a:hover {
background:#F39495 url(img/04h.jpg) no-repeat;
}
li:last-child>a {
border-right:0;
}
</style>
</head>
<body>
<nav class="g-nav">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</nav>
</body>
</html>
