Webデザイナーへの道しるべ | suge1040's diary

Webデザイナーになる事を目指しフェリカテクニカルアカデミーで勉強していましたsuge1040によるブログです。

ナビゲーションメニュー作成 - CSS Spritesで設定 -

CSS

CSSを使ってナビゲーションメニューに画像を貼付けて作成する方法

 

f:id:suge1040:20140702212607p:plain

 

- ソース -

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>CSS Sprites</title>
<linkhref="css/style.css"rel="stylesheet">
</head>
<body>
<divid="nav">
<ul>
<liid="home"><ahref="#"><em>ホーム</em></a></li>
<liid="food"><ahref="#"><em>カフェフード</em></a></li>
<liid="drink"><ahref="#"><em>カフェドリンク</em></a></li>
<liid="info"><ahref="#"><em>インフォメーション</em></a></li>
<liid="contact"><ahref="#"><em>お問い合わせ</em></a></li>
</ul>
</div>
</body>
</html>


- CSS -

@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 ProN",
		Meiryo, 
		sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}
em {
	visibility: hidden;
}

/* nav */
#nav {
	width: 800px;
	height: 60px;
	margin: 50px 0 0 50px;
}
#nav ul {
	overflow: hidden;
}
#nav li {
	float: left;
}
#nav li a {
	display: block;
	width: 160px;
	height: 60px;
	background-image: url(../images/btn1013.jpg);
	background-repeat: no-repeat;
}

/* individual */
#nav li#home a {
	background-position: left 0;
}
#nav li#home a:hover, #nav li#home a:active {
	background-position: left -80px;
}
#nav li#food a {
	background-position: -160px 0;
}
#nav li#food a:hover, #nav li#food a:active {
	background-position: -160px -80px;
}
#nav li#drink a {
	background-position: -320px 0;
}
#nav li#drink a:hover, #nav li#drink a:active {
	background-position: -320px -80px;
}
#nav li#info a {
	background-position: -480px 0;
}
#nav li#info a:hover, #nav li#info a:active {
	background-position: -480px -80px;
}
#nav li#contact a {
	background-position: right 0;
}
#nav li#contact a:hover, #nav li#contact a:active {
	background-position: right -80px;
}

参考ブログ