webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

ナビゲーションボタンの作成

今回はボタンを1つ1つ画像にして背景画像で指定します。hover時の画像も別に制作してみましょう。

home.png
f:id:yachin29:20161007210802p:plain


home_h.png
f:id:yachin29:20161007210752p:plain


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーションの作成</title>
<style>
html,body,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
a {
text-decoration:none;
color:#FFFFFF;
}
ul {
list-style:none;
}

/*レイアウト部分*/

ul {
width:800px;
height:50px;
overflow:hidden;
}
li {
width:200px;
height:50px;
float:left;

}
li a {
display:block;
text-align:center;
line-height:50px;
background: #06F;
border-right: 1px solid #000;
text-indent:100%; /*要素の外の右隣に移動させる*/
white-space:nowrap; /*改行を無効にする*/
overflow:hidden; /*はみ出した文字を隠す*/
}
li#home a {
background:url(img/home.png) no-repeat;
} 
li#food a {
background:url(img/food.png) no-repeat;
} 
li#access a {
background:url(img/access.png) no-repeat;
} 
li#info a {
background:url(img/info.png) no-repeat;
} 

li#home a:hover {
background:url(img/home_h.png) no-repeat;
} 
li#food a:hover {
background:url(img/food_h.png) no-repeat;
} 
li#access a:hover {
background:url(img/access_h.png) no-repeat;
} 
li#info a:hover {
background:url(img/info_h.png) no-repeat;
} 

li:last-child a {
border-right:none;
}

li a:hover {
background:#000033;
color:#EEE;
}
</style>
</head>

<body>
<ul>
<li id="home"><a href="#">home</a></li>
<li id="food"><a href="#">food</a></li>
<li id="access"><a href="#">access</a></li>
<li id="info"><a href="#">info</a></li>
</ul>
</body>
</html>