illustratorでボタンを作る

授業

CSS Sprite

CSS Spriteとは

ひとつの画像の一部分を見せながら、画像を移動させ、変化したように見せること。

今回はボタンをつくりました。

反応後はバックにグラデーションがかかるように作っています。



【HTML】

<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Sprit</title>
<link href="css/base.css" rel="stylesheet" media="screen, print">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#"><em>home</em></a></li>
<li id="food"><a href="#"><em>food</em></a></li>
<li id="drink"><a href="#"><em>drink</em></a></li>
<li id="info"><a href="#"><em>info</em></a></li>
<li id="contact"><a href="#"><em>contact</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 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: 800px;
	height: 60px;
	margin: 50px 0 0 50px;
}
#nav li {
	float: left;
	display: inline;
}
#nav li a {
	width: 160px;
	height: 60px;
	display: block;
	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

</css>


★入力メモ★

  • 【div】や【li】など、ボックス内にボックスがある場合は、
    両方にマージンを入力していても、どちらかの値の大きい方が採用されます
  • 【display : inline ;】＝文字のように並べますという命令。IE対策。【float】とセットで使われる。
  • 【visibility : hidden ;】＝画像の上に文字がのってる場合、この入力がないと文字on文字になる。
    他にも【off-left : -999em ;】や【display : none ;】があるが、
    visibility〜が欧米ではよく使われる。