Illustratorボタンデザイン&CSS Spriteでナビゲーション設定
1px幅で描いたオブジェクトは、大きさを指定していたとしても1px（両側に0.5px）大きくなる。 それを防ぐために（指定した大きさぴったりにするために）『線を内側に揃える』を指定する。
HTTPリクエストを最小限に抑えるために1枚の画像で可変表示可能にする。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Sprit</title>
<link rel="stylesheet" href="CSS/style1.css">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#"><em>ホーム</em></a></li>
<li id="food"><a href="#"><em>カフェフード</em></a></li>
<li id="drink"><a href="#"><em>カフェドリンク</em></a></li>
<li id="infomation"><a href="#"><em>インフォメーション</em></a></li>
<li id="contact"><a href="#"><em>お問い合わせ</em></a></li>
</ul>
</div>
</body>
</html>
@charset "utf-8";
/* reset */
html, nav, ul ,li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic Pro",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
li {
text-decoration: none;
}
img {
border: 0;
}
em {
visibility: hidden;
}
/* layout */
#nav {
width: 800px;
height: 60px;
margin: 50px 0 0 50px;
}
#nav li {
float: left;
display: inline;
}
#nav li a {
display: block;
width: 160px;
height: 60px;
background-image: url(../img/btn2.png);
background-repeat: no-repeat;
}
/* individual */
#nav li#home a {
background-position: 0 0;
}
#nav li#home a:hover {
background-position: 0 -70px;
}
#nav li#food a {
background-position: -160px 0;
}
#nav li#food a:hover {
background-position: -160px -70px;
}
#nav li#drink a {
background-position: -320px 0px;
}
#nav li#drink a:hover {
background-position: -320px -70px;
}
#nav li#infomation a {
background-position: -480px 0;
}
#nav li#infomation a:hover {
background-position: -480px -70px;
}
#nav li#contact a {
background-position: -640px 0;
}
#nav li#contact a:hover {
background-position: -640px -70px;
}
