１５日目 横ナビゲーション 画像に差し替え
index01にはナビゲーションボタンのみ
各ボタンを押すとそのページへリンクする
リンク先ではホバー時のボタンのまま
html------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>横ナビゲーション(画像)の練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul class="nav">
<li class="home"><a href="home.html">ホーム</a></li>
<li class="food"><a href="food.html">カフェフード</a></li>
<li class="drink"><a href="drink.html">カフェドリンク</a></li>
<li class="info"><a href="info.html">インフォメーション</a></li>
<li class="contact"><a href="contact.html">お問い合わせ</a></li>
</ul>
</body>
</html>
----------------------------------------------------------------------------------------------
ボタン画像はホバー時のものも一緒になっている
stylesheet--------------------------------------------------------
@charset "utf-8";
/* CSS Document */
html,body,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gotic ProN",
Meiryo,
sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }
body {
font-size: 16px;
background: #FFF;
}
body#home {
background: #C99;
}
body#food {
background: #CC6;
}
body#drink {
background: #9C6;
}
body#info {
background: #86969F;
}
body#contact {
background: #AC80AC;
}
.nav {
width: 800px;
margin: 50px auto 0;
overflow: hidden;
}
.nav li {
float: left;
}
.nav li a {
display: block;
width: 160px;
line-height: 60px;
background: #FFF url(img/btn.png) no-repeat 0 0; /*0 0は左から０、上から０*/
white-space: nowrap; /*スペースがあっても自動改行しないで*/
text-indent: 100%; /*文全部を右へ移動*/
overflow: hidden; /*aの範囲からはみ出たものを消す*/
}
.nav li.home a {
background: #FFF url(img/btn.png) no-repeat left top; /*misscheckの為に＃FFFをいれる*/
}
.nav li.home a.this {
background-position: left -70px;
}
.nav li.home a:hover {
background: #FFF url(img/btn.png) no-repeat left -70px;
}
.nav li.food a {
background: #FFF url(img/btn.png) no-repeat -160px 0;
}
.nav li.food a.this {
background-position: -160px -70px;
}
.nav li.food a:hover {
background: #FFF url(img/btn.png) no-repeat -160px -70px;
}
.nav li.drink a {
background: #FFF url(img/btn.png) no-repeat -320px 0;
}
.nav li.drink a.this {
background-position: -320px -70px;
}
.nav li.drink a:hover {
background: #FFF url(img/btn.png) no-repeat -320px -70px;
}
.nav li.info a {
background: #FFF url(img/btn.png) no-repeat -480px 0;
}
.nav li.info a.this {
background-position: -480px -70px;
}
.nav li.info a:hover {
background: #FFF url(img/btn.png) no-repeat -480px -70px;
}
.nav li.contact a {
background: #FFF url(img/btn.png) no-repeat -640px 0;
}
.nav li.contact a.this {
background-position: -640px -70px;
}
.nav li.contact a:hover {
background: #FFF url(img/btn.png) no-repeat -640px -70px; /*right bottomでもいける*/
}
p.img {
width: 800px;
margin: 0 auto;
}
--------------------------------------------------------------------------------
html----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>横ナビゲーション(画像)の練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="home">
<ul class="nav">
<li class="home"><a href="home.html" class="this">ホーム</a></li>
<li class="food"><a href="food.html">カフェフード</a></li>
<li class="drink"><a href="drink.html">カフェドリンク</a></li>
<li class="info"><a href="info.html">インフォメーション</a></li>
<li class="contact"><a href="contact.html">お問い合わせ</a></li>
</ul>
<p class="img"><img src="img/home.png" alt="home"></p>
</body>
</html>
--------------------------------------------------------------------------------------
各ボタンごとにhtmlファイルを作成して
各htmlごとにそれぞれのhtmlへリンクさせる
