CSSによる画像置換 - WEBデザインの学習法

２つの画像を用意して、CSSで背景画像に記述して切り替えるやり方です。
名前をclassで指定して画像置換の練習をしました。「#case1」、「#case1 ul」に全体の横幅と高さを記述。「#case1 ul li a」には1つの画像の横幅と高さを指定。「display:block;」と「 float:left;」をセットで記述する。

OFF-LEFT・・・・-9999pxは使用不可
飛ばしたい文字を<em>〜</em>でマークアップする。
em {
	visibility: hidden;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-type" content="text/javascript" />
<meta name="keywords" content="CSSによる画像置換 />
<meta name="description" content="CSSによる画像置換 />
<title>CSSによる画像置換</title>
<link href="base1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="case1">
<ul>
<li class="home"><a href="#">HOME</a></li>
<li class="topics"><a href="#">Topics</a></li>
<li class="products"><a href="#">Products</a></li>
<li class="aboutus"><a href="#">Aboutus</a></li>
</ul>
</body>
</html>

@charset "UTF-8";

/* リセット */
html, body, div, ul, li {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
	sans-serif;
}
ul {
	list-style-type: none; 
}
a {
	text-decoration: none; 
}
img {
	border: 0;
}
em {
	visibility: hidden;
}

/* 画像置換 */
#case1{
	height:40px;
	width:480px;/* 全体の横幅 */
}
#case1 ul{
	height: 40px;
	width: 480px;/* 全体の横幅 */
}
#case1 ul li a{
	width: 120px;/* 「li」に幅、高さを入れなくても良い*/
	height: 40px;
	display: block;/* セットで使用 */
	float: left;
}
#case1 ul li.home a {
	background: url(images/btn01.gif);
	background-repeat: no-repeat;
}
#case1 ul li.topics a {
	background: url(images/btn02.gif);
	background-repeat: no-repeat;
}
#case1 ul li.products a {
	background: url(images/btn03.gif);
	background-repeat: no-repeat;
}
#case1 ul li.aboutus a {
	background: url(images/btn04.gif);
	background-repeat: no-repeat;
}
#case1 ul li.home a:hover {
	background: url(images/btn01_o.gif);
	background-repeat: no-repeat;
}
#case1 ul li.topics a:hover {
	background: url(images/btn02_o.gif);
	background-repeat: no-repeat;
}
#case1 ul li.products a:hover {
	background: url(images/btn03_o.gif);
	background-repeat: no-repeat;
}
#case1 ul li.aboutus a:hover {
	background: url(images/btn04_o.gif);
	background-repeat: no-repeat;
}