ナビゲーション(2)

CSS Spretes

ロールオーバー時の画像置換を、ひとつの画像内の部分部分を見せ画面上の画像表示を変更する手法。

  • 複数の画像を一つの画像にまとめることでHTTPリクエスト数を減らす事できる。
  • 今回はナビゲーションのlink時の画像とhover時の画像をひとつの画像で作成する。
  • 閲覧者に見せたい画像の場所を指定する。

>>画像クリックで作成品へ

f:id:fujiwarashinichi:20140304223516p:plain

作成画像

これはひとつの画像。

f:id:fujiwarashinichi:20140305004441p:plain

 

見せ方

  • 表示させる部分は「160px*60px」のみ。
  • ロールオーバー時に移動する座標を指定する。
  • 画像は左上が原点(x=0、y=0)
  •  上方向の移動はマイナスになることに注意!

 

f:id:fujiwarashinichi:20140305004203p:plain

css

@charset "UTF-8";

/* reset */
html, body, div, ul, li{
  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:url(nav.png) no-repeat; } /* individual */ #nav li#home a { background-position: left top; } #nav li#home a:hover { background-position: left -70px; } #nav li#food a { background-position: -160px 0; } #nav li#food a:hover { background-position: -160px -70px; } #nav li#drink a { background-position: -320px 0; } #nav li#drink a:hover { background-position: -320px -70px; } #nav li#info a { background-position: -480px 0; } #nav li#info a:hover { background-position: -480px -70px; } #nav li#contact a { background-position: right 0; } #nav li#contact a:hover { background-position: right -70px; }

html

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