15日目 | CSS Sprite | CSSと背景画像で作る横ナビメニュー

授業

背景画像を使ったナビゲーションメニュー

CSS Spriteに入る前に、まずは別画像を使わず、CSSのみで作るナビメニューの復習をします。

完成したナビ


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>縦横ナビメニュー</title>
<link rel="stylesheet" href="css/style2.css" media="print,screen">
</head>
<body>
<div id="nav1"><!--nav1は縦メニュー-->
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
<div id="nav2"><!--nav2は横メニュー-->
<ul>
<li><a href="#">HTML+CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">WordPress</a></li>
<li><a href="#">ActionScript</a></li>
</ul>
</div>
</body>
</html>

@charset "UTF-8";

*{
	  margin:0;
		padding:0;
		font-family:
		"メイリオ",
		Meiryo,
		Sans-serf
		;
	}
/*body{
    font-size:2em;
	}	*/
	
/*縦並びナビゲーション*/
#nav1{
  font-size:1em;
	font-weight:bold;
	height:auto;
	margin:50px 0 0 50px;
}
#nav1 ul{
  list-style-type:none;
	width:150px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	border-left:2px solid #fff;
	background-color:#6fab78;
}
#nav1 ul li a{
    width:auto;
		height:auto;
		padding:6px;
		display:block;
		border-bottom:2px solid #fff;    
}
#nav1 ul a:link, #nav1 ul a:visited{
    color:#ffffff;
		text-decoration:none;
}
#nav1 ul a:hover{
    color:#ffffff;
		background-color:#447769;
}


/*横並びナビゲーション*/
#nav2{
	  height:auto;
		width:auto;
		margin:50px 0 0 50px;
}

#nav2 ul{
	  list-style-type:none;
		width:750px;
		height:auto;
		border-top:2px solid #fff;
		border-bottom:2px solid #fff;
		border-left:2px solid #fff;
		overflow:auto;
	}
	
#nav2 ul li{
  font-size:1em;
	font-weight:bold;
	text-align:center;
	width:148px;
	height:inline;
	float:left;
	display:inline;
	background-color:#6fab78;
	border-right:2px solid #fff;	
}

#nav2 ul li a{
	  padding:7px 0;
		display:block;
	}
	
#nav2 ul a:link, #nav2 ul a:visited{
    color:#ffffff;
		text-decoration:none;
}

#nav2 ul a:hover{
    color:#ffffff;
		background-color:#447769;
}

CSS Sprite | 背景画像を使ったナビゲーションメニュー/Illustratorでナビ用背景画像作成

作成した背景画像

Illustratorによる画像作成のポイント
  • 作成する画像のサイズを把握しておく。後でCSSの指定時にサイズを指定する時に必要になる
  • 今回は幅160px、高さ40pxの画像を５枚横並び、下に70pxずらしてもう一列、全体で800×110のサイズの画像を作成
  • 環境設定でプレビュー境界を使用にチェック、表示のピクセルプレビューにチェックを入れておく

※この設定で角をぴったり合わせることができる

  • 線の設定は中央
  • 5色の帯には線なし
  • テキストは中央揃え。Ctrl+Cで設定できる。（右なら+R、左なら+L）
  • a:hover時に背景になる画像のグラデーションは上が濃く、下が薄い方が安定感がある
完成したCSS Spriteによる横ナビメニュー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景画像で横ナビメニュー</title>
<link rel="stylesheet" href="css/style3.css" media="print, screen">
</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>

@charset "UTF-8";

*{
	  margin:0;
		padding:0;
		line-height:1.0;
		font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴPro W3",
		Osaka,
		"MS P Gothic"
		"MS P Gothic"
		"メイリオ",
		Meiryo,
		Sans-serf
		;
	}

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(../img/haikei2.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:0 -70px;
}
#nav li#food a{
    background-position:-160px 0;
}
#nav li#food a:hover, #nav li#food a:active{
    background-position:-160px -70px;
}
#nav li#drink a{
  background-position:-320px 0;
}
#nav li#drink a:hover, #nav li#drink a:active{
	  background-position:-320px -70px;
}
#nav li#info a{
    background-position:-480px 0;
}
#nav li#info a:hover, #nav li#info a:active{
    background-position:-480px -70px;
}
#nav li#contact a{
    background-position:right 0;
}
#nav li#contact a:hover, #nav li#contact a:active{
    background-position:right -70px;
}

CSS作成のポイント

  • display:inline;でIE6対策
  • float:left;はdisplay:inline;とセット
  • display:block;はマウスで押せる免責を広げる指定。文字以外の部分クリックでも反応する

photoshopで背景画像を作る

photoshopでの画像作成のポイント

背景レイヤーを非表示にしてイメージ-トリミング−透明部分をトリミングで範囲選択
WEB用に保存、形式はjpg

photoshopの起動方法

Shift+Ctrl+AltをPSアイコンダブルクリック後0.5秒以内に押し、押し続ける