WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

CSS Spriteでナビゲーションボタン

CSS Sprite(スプライト)とは…画像の一部を見せ、画像を移動しながら変化したように見せる手法。


http://efu.sakura.ne.jp/web/0414/


Illustratorでナビゲーションボタンの画像を作る。

f:id:mmmmofu:20150414011309p:plain

ポイント

新規オブジェクトをピクセルに整合
ピクセルプレビュー
線を内側に揃える
ダイレクト選択ツールで一部分だけ選択

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ペンギンカフェ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#">ホーム</a></li>
<li id="food"><a href="#">カフェフード</a></li>
<li id="drink"><a href="#">カフェドリンク</a></li>
<li id="info"><a href="#">インフォメーション</a></li>
<li id="contact"><a href="#">お問い合わせ</a></li>
</ul>
</div>
<div id="nav_2">
<ul>
<li id="nav_2_1"><a href="#">HOME</a></li>
<li id="nav_2_2"><a href="#">About</a></li>
<li id="nav_2_3"><a href="#">Works</a></li>
<li id="nav_2_4"><a href="#">Dogs</a></li>
<li id="nav_2_5"><a href="#">cats</a></li>
<li id="nav_2_6"><a href="#">Contact</a></li>
</ul>
</div>
<div id="nav_3">
<ul>
<li id="nav_3_1"><a href="#">Plofile</a></li>
<li id="nav_3_2"><a href="#">Gallery</a></li>
<li id="nav_3_3"><a href="#">Contact</a></li>
<li id="nav_3_4"><a href="#">MAP</a></li>
<li id="nav_3_5"><a href="#">Blog</a></li>
</ul>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

/* reset */
html,body,div,nav,li,ul {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}

/* body */
body {
font-size: 16px;
color: #333;
}

/* nav */
#nav {
width: 800px;
overflow: hidden;
margin: 50px auto;
}
#nav_2 {
width: 900px;
overflow: hidden;
margin: 0 auto 50px;
}
#nav_3 {
width: 750px;
overflow: hidden;
margin: 0 auto;
}
#nav li {
float: left;
width: 160px;
height: 50px;
}
#nav_2 li {
float: left;
width: 150px;
height: 50px;
}
#nav_3 li {
float: left;
width: 150px;
height: 50px;
}
#nav li a {
display: block;
background: url(img/nav_btn.png) no-repeat left top;
line-height: 50px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
#nav_2 li a {
display: block;
background: url(img/nav.png) no-repeat left top;
line-height: 50px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
#nav_3 li a {
display: block;
background: url(img/nav1.png) no-repeat left top;
line-height: 50px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;
}
#nav li#home a:hover {
background: url(img/nav_btn.png) no-repeat left -60px;
}
#nav li#food a {
background: url(img/nav_btn.png) no-repeat -160px top;
}
#nav li#food a:hover {
background: url(img/nav_btn.png) no-repeat -160px -60px;
}
#nav li#drink a {
background: url(img/nav_btn.png) no-repeat -320px top;
}
#nav li#drink a:hover {
background: url(img/nav_btn.png) no-repeat -320px -60px;
}
#nav li#info a {
background: url(img/nav_btn.png) no-repeat -480px top;
}
#nav li#info a:hover {
background: url(img/nav_btn.png) no-repeat -480px -60px;
}
#nav li#contact a {
background: url(img/nav_btn.png) no-repeat -640px top;
}
#nav li#contact a:hover {
background: url(img/nav_btn.png) no-repeat -640px -60px;
}

#nav_2 li#nav_2_1 a:hover {
background: url(img/nav.png) no-repeat left -50px;
}
#nav_2 li#nav_2_2 a {
background: url(img/nav.png) no-repeat -150px top;
}
#nav_2 li#nav_2_2 a:hover {
background: url(img/nav.png) no-repeat -150px -50px;
}
#nav_2 li#nav_2_3 a {
background: url(img/nav.png) no-repeat -300px top;
}
#nav_2 li#nav_2_3 a:hover {
background: url(img/nav.png) no-repeat -300px -50px;
}
#nav_2 li#nav_2_4 a {
background: url(img/nav.png) no-repeat -450px top;
}
#nav_2 li#nav_2_4 a:hover {
background: url(img/nav.png) no-repeat -450px -50px;
}
#nav_2 li#nav_2_5 a {
background: url(img/nav.png) no-repeat -600px top;
}
#nav_2 li#nav_2_5 a:hover {
background: url(img/nav.png) no-repeat -600px -50px;
}
#nav_2 li#nav_2_6 a {
background: url(img/nav.png) no-repeat -750px top;
}
#nav_2 li#nav_2_6 a:hover {
background: url(img/nav.png) no-repeat -750px -50px;
}

#nav_3 li#nav_3_1 a:hover {
background: url(img/nav1.png) no-repeat left -50px;
}
#nav_3 li#nav_3_2 a {
background: url(img/nav1.png) no-repeat -150px top;
}
#nav_3 li#nav_3_2 a:hover {
background: url(img/nav1.png) no-repeat -150px -50px;
}
#nav_3 li#nav_3_3 a {
background: url(img/nav1.png) no-repeat -300px top;
}
#nav_3 li#nav_3_3 a:hover {
background: url(img/nav1.png) no-repeat -300px -50px;
}
#nav_3 li#nav_3_4 a {
background: url(img/nav1.png) no-repeat -450px top;
}
#nav_3 li#nav_3_4 a:hover {
background: url(img/nav1.png) no-repeat -450px -50px;
}
#nav_3 li#nav_3_5 a {
background: url(img/nav1.png) no-repeat -600px top;
}
#nav_3 li#nav_3_5 a:hover {
background: url(img/nav1.png) no-repeat -600px -50px;
}
#nav_3 li#nav_3_6 a {
background: url(img/nav1.png) no-repeat -750px top;
}
#nav_3 li#nav_3_6 a:hover {
background: url(img/nav1.png) no-repeat -750px -50px;
}