2012-12-04|CSS Spriteで設定

ホーム
カフェフード
カフェドリンク
インフォメーション
お問合せ

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
address, ul ,ol ,li , dl, dt, dd, table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo,
		"メイリオ",
		Osaka,
		"MS P Gothic",
		"ＭＳ Ｐゴシック",
		sans-serif;
}
ul {
	list-style-type: none;
}
a {
	text-decoration: none;
}
img {
	border: 0;
}
em {
	visibility: hidden;
}

/* nav */
#nav {
	width: 200px;
	height: 250px;
	margin: 50px 0 0 50px;
}
#nav li a {
	width: 200px;
	height: 50px;
	display: block;
	background-color: #fff;
	background-image: url(../img/01.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

/* individual */
#nav li#home a {
	background-position: 0 0;
}
#nav li#home a:hover, #nav li#home a:active {
	background-position: -200px 0;
}
#nav li#food a {
	background-position: 0 -50px;
}
#nav li#food a:hover, #nav li#food a:active {
	background-position: -200px -50px;
}
#nav li#drink a {
	background-position: 0 -100px;
}
#nav li#drink a:hover, #nav li#drink a:active {
	background-position: -200px -100px;
}
#nav li#info a {
	background-position: 0 -150px;
}
#nav li#info a:hover, #nav li#info a:active {
	background-position: -200px -150px;
}
#nav li#contact a {
	background-position: 0 -200px;
}
#nav li#contact a:hover, #nav li#contact a:active {
	background-position: -200px -200px;
}

• 縦ナビの時は「background-position」は0 0（left top)
• 「background-color」が「fff」なのは無かったとき白く表示するようにしている