もっと簡単に・・ <div class="header"> 　<div class="nav"> 　　<ol> 　　　<li><a href="/">ホーム</a></li> 　　　<li><a href="/intro">初めての方へ</a></li> 　　　<li><a href="/staff">スタッフ紹介</a></li> 　　　<li><a href="/price">料金</a></li> 　　　<li><a href="/access">アクセス</a></li> 　　　<li><a href="/FAQ">よくあるご質問</a></li> 　　</ol> 　</div> </div> HTML5だと <header> 　<nav> 　　<ol> 　　　<li><a href="/">ホーム</a></li> 　　　<li><a href="/intro">初めての方へ</a></li> 　　　<li><a href="/staff">スタッフ紹介</a></li> 　　　<li><a href="/price">料金</a></li> 　　　<li><a href="/access">アクセス</a></li> 　　　<li><a href="/FAQ">よくあるご質問</a></li> 　　</ol> 　</nav> </header> div.header div.nav{text-align:center;height:60px;} div.header div.nav ol{list-style:none;margin:0;padding:0;font-size:0;} div.header div.nav ol li{display:inline-block;margin:0;padding:0;width:164px;height:60px;position:relative;} div.header div.nav ol li a{font-size:16px;display:block;width:100%;height:100%;background:url(images/gnav_on.png) gray;overflow:hidden;line-height:60px;text-decoration:none;} div.header div.nav ol li a:hover{text-align:left;text-indent:-200px;} div.header div.nav ol li a[href="/"]{background-position: -164px 0;} div.header div.nav ol li a[href="/intro"]{background-position: -328px 0;} div.header div.nav ol li a[href="/staff"]{background-position: -492px 0;} div.header div.nav ol li a[href="/price"]{background-position: -656px 0;} div.header div.nav ol li a[href="/access"]{background-position: -656px 0;} div.header div.nav ol li a[href="/FAQ"]{background-position: -820px 0 ;} ★せっかくスプライトを利用するのでしたら、その目的から当初の画像もスプライトのほうが良いです。 　スプライトとは、画像を最初に読み込ませておくことで画像の変更をスムーズに行えるのが利点です。 　そうすることで div.header div.nav ol li a{text-indent:-200px;overflow:hidden;text-align:center;} div.header div.nav ol li a[href="/"]{background-position: -164px 0;} div.header div.nav ol li a[href="/intro"]{background-position: -328px 0;} div.header div.nav ol li a[href="/staff"]{background-position: -492px 0;} div.header div.nav ol li a[href="/price"]{background-position: -656px 0;} div.header div.nav ol li a[href="/access"]{background-position: -656px 0;} div.header div.nav ol li a[href="/FAQ"]{background-position: -820px 0 ;} div.header div.nav ol li a[href="/"]:hover, div.header div.nav ol li a[href="/"]:focus{background-position: -164px 60px;} div.header div.nav ol li a[href="/intro"]:hover, div.header div.nav ol li a[href="/intro"]:focus{background-position: -328px 60px;} div.header div.nav ol li a[href="/staff"]:hover, div.header div.nav ol li a[href="/staff"]:focus{background-position: -492px 60px;} div.header div.nav ol li a[href="/price"]:hover, div.header div.nav ol li a[href="/price"]:focus{background-position: -656px 60px;} div.header div.nav ol li a[href="/access"]:hover, div.header div.nav ol li a[href="/access"]:focus{background-position: -656px 60px;} div.header div.nav ol li a[href="/FAQ"]:hover, div.header div.nav ol li a[href="/FAQ"]:focus{background-position: -820px 60px;} div.header div.nav ol li a[href="/"]:active{background-position: -164px 120px;} div.header div.nav ol li a[href="/intro"]:active{background-position: -328px 120px;} div.header div.nav ol li a[href="/staff"]:active{background-position: -492px 120px;} div.header div.nav ol li a[href="/price"]:active{background-position: -656px 120px;} div.header div.nav ol li a[href="/access"]:active{background-position: -656px 120px;} div.header div.nav ol li a[href="/FAQ"]:active{background-position: -820px 120px;} とかは無論、先でデザインを変えるのがスタイルシート側ですべてできます。 　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )