使ってみよう！スタイルシート

リストを使ったメニュー（テキスト）よりちょっとステップアップして、
ボタンに画像を使ってみよう。




別のページにジャンプした後は、メニューの画像を変えて、
今見ているページがドコなのか瞬時に分かるようにすると、見る人にとって便利。



正しくは下記の順で入れ子のボックスが必要です。

<div id="container">　フロートする左サイドバーと右のコンテンツを入れる箱
<div id="sidebar">
<div id="content">
今回は、sidebarのみのご紹介。

/*************************************
サイドバーの設定
**************************************/
#sidebar{
	background:skyblue;
	float: left;
	width: 150px;
	height:250px;
	}
	
#sidebar ul{
	list-style:none;
	margin:10px 5px 0px 5px;
	padding: 0;
}

#sidebar ul li {
	margin:5px auto 5px auto;
	padding: 0;
}

#sidebar ul li a {
	display: block;
	padding:0;　margin:0;
}

/*お知らせの画像（デフォルト）*/
/*分かりやすいように画像名をカタカナにしましたが、実際にWEB上で稼動させる時は半角英数字にして下さい*/
#sidebar ul li.info a{
	background: url("../image/サンプル_ボタン1.gif");
	width:140px; height:35px;
	text-indent:-9999px;
}

/*ポリシーの画像（デフォルト）*/
#sidebar ul li.policy a{
	background: url("../image/サンプル_ボタン2.gif");
	width:140px; height:35px;
	text-indent:-9999px;
}

/*お知らせの画像（hover）*/
#sidebar ul li.info a:hover{
	background: url("../image/サンプル_ボタン1-2.gif");
	background-position:0px 0px;
	width:140px; height:35px;
}

/*ポリシーの画像（hover）*/
#sidebar ul li.policy a:hover{
	background: url("../image/サンプル_ボタン2-2.gif");
	background-position:0px 0px;
	width:140px; height:35px;
}

/*お知らせのページinfo.htmlに、今ココ！を表す画像設定。hoverと同じものを使っています*/
#sidebar.infoside ul li.info a{
	background: url("../image/サンプル_ボタン1-2.gif");
	background-position:0px 0px;
	width:140px; height:35px;
}

基本HTML

<div id="sidebar">
    <ul>
	<li class="info"><a href="info.html">お知らせ</a></li>
	<li class="policy"><a href="http://">ポリシー</a></li>
    </ul>

info.htmlにこの設定をすると、info.htmlを表示している時メニューボタン画像が変わります
class="infoside"がポイントです。

  <div id="sidebar" class="infoside">
    <ul>
	<li class="info"><a href="info.html">お知らせ</a></li>
	<li class="policy"><a href="">ポリシー</a></li>
    </ul>

練習用にどうぞ。