休日　webページ作成の復習　ナビゲーションボタン画像の埋め込み

自分で一から作り直してみた

f:id:chawannmusi:20160214193451p:plain

html--------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div id="header">
<h1><span>★</span>うちのにゃんこ<span>★</span></h1>
<p>我が家のアイドル、にゃんこ達を紹介します！</p>
<ul class="wrapper">
<li class="nya"><a href="#content">我が家のにゃんこ紹介</a></li>
<li class="kai"><a href="#profile">飼い主紹介</a></li>
<li class="shasin"><a href="#entry">猫写真募集</a></li>
</ul>
</div>

<div id="content">
<h2>我が家のにゃんこ紹介</h2>
<div class="cats">

<h3>●すばる<span class="male">（白キジトラ・オス）</span></h3>
<p class="lead">目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br>
段ボール箱のかどや柱で爪とぎをするのが大好き。<p>
<p><img src="img/subaru.jpg" alt"すばる"></p>
<dl class="data">
<dt>特徴：</dt>
<dd>大きな目と耳。まがったしっぽ。</dd>
<dt>性格：</dt>
<dd>マイペース。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>

</div>

<div class="cats">
<h3>●ぐれ子<span class="female">（灰色毛皮・メス）</span></h3>
<p class="lead">生まれたての時はアメショーのような模様があったはずなのに、成長するに従ってただの灰色ネコに。長毛種の血が少し混じっているのか毛皮がフワフワしていて家族から「綿ぼこり」呼ばわりされている。<br>
しゃがれ声と貫禄のある顔つきからは想像できないほどの甘え上手で、初対面でも誰彼かまわずゴロゴロ擦り寄ってくるのでお客さんにはめっぽう評判が良い。</p>

<p><img src="img/gureko.jpg" alt"ぐれ子"></p>
<dl class="data">
<dt>特徴：</dt>
<dd>しゃがれ声。ゴロゴロすりすり攻撃。</dd>
<dt>性格：</dt>
<dd>甘え上手。腹黒。</dd>
</dl>
<p class="more"><a href="#">もっと見る</a></p>
</div>

<div class="cats">
<h3>●ねず子<span class="female">（白茶トラ・メス）</span></h3>
<p class="lead">ぐれ子と共に我が家にやってきた白茶トラの女の子。ぐれ子と違って典型的な「ネコっぽい」性格。ツンデレというよりむしろツンツン（涙）。ぐれ子との勢力争いに敗北して家を追い出され、現在ほぼ半ノラ状態。<br>
見た目はもともと純日本猫風のキレイ系だったけど、ノラ生活中にカラスに攻撃され、片目を失う。孤高の猫。</p>

<p><img src="img/nezuko.jpg" alt"ねず子"></p>

<dl class="data">
<dt>特徴：</dt>
<dd>片目。小顔。</dd>
<dt>性格：</dt>
<dd>プライド高い。人間に対しては女王様。</dd>
</dl>

<p class="more"><a href="#">もっと見る</a></p>

</div>

<div id="profile">
<h2>飼い主紹介</h2>
<dl>
<dt>H.N. ：</dt><dd>roka404</dd>
<dt>仕事：</dt><dd>フリーランスでWeb関係のお仕事してます</dd>
<dt>mail ：</dt><dd><a href="info@hogehoge.com">info@hogehoge.com</a></dd>
<dt>Web ：</dt><dd><a href="http://www.hogehoge.com/">http://www.hogehoge.com/
</dl>
</div>

<div id="entry">
<h2>猫写真募集</h2>
<p>ギャラリーページを企画中のため、みなさまの大切なにゃんこ様を紹介してください♪
10にゃんこ集まったら紹介ページを開設します！</p>
<p class="apply"><a href="#">応募はこちら</a></p>
</div>

</div>
<div id="footer">
<p><small>Copyright © UCHI NO NYAN'S All Rights Reserved.</small></p>
</div>
</div>
</body>
</html>

------------------------------------------------------------------------------------------------

stylesheet-------------------------------------------------------------------------------------

@charset "UTF-8";

html, body, h1, h2, h3, p, ul, li, dl, dt, dd {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

body {
font-size: 16px;
background: url(img/bg-stripe01.png) repeat-X rgb(255, 238, 216);

}

#container {
width: 800px;
margin: 50px auto;
padding: 60px;
background: #FFF;
}

ul { list-style: none;}

a {
color: crimson;
}
a:hover {
color: coral;
}

h1 {
text-align: center;
margin-bottom: 40px;
color: #6fbb9a;
}

h2 {
border: 1px dotted #94c8b1;
border-left: 10px solid #d0e35b;
color: #6fbb9a;
padding: 5px 20px;
margin-bottom: 30px;
}

h3 {
padding: 40px 20px 0;
}

/*header--------------------------------------*/
#header span {
color: #d0e35b;
font-size: 36px;
}

#header p {
text-align: center;
border-top: 1px dotted #94c8b1;
border-bottom: 1px dotted #94c8b1;
padding: 20px;
}

.wrapper {
width: 577px;
margin:10px auto;
overflow: hidden;
background:#FFF url(img/nav2.png) no-repeat 0 0;
}

.wrapper li {
float: left;
}
.wrapper li a {
display: block;
width: 192px;
line-height: 60px;
white-space: nowrap;
text-indent: 100%;
overflow: hidden;

}

#header ul li.nya a:hover {
background:#FFF url(img/nav2.png) no-repeat 0 -70px;

}
#header ul li.kai a:hover {
background:#FFF url(img/nav2.png) no-repeat -192px -70px;

}

#header ul li.shasin a:hover {
background:#FFF url(img/nav2.png) no-repeat -384px -70px;

}

/*content--------------------------------------*/

#content .cats {
background: url(img/bg-stripe02.png) repeat-x rgb(255, 238, 216);
margin-bottom: 20px;
padding-bottom: 30px;
}

p.lead {
padding: 10px 20px 20px;
line-height: 1.5;
}

/*flot---------------------------------*/

.cats img {
float: left;
padding: 0 20px;
}

dl.data {
float: left;
width: 400px;
}

dl {
overflow:hidden;
}

dt {
float:left;
font-weight:bold;
}

dd {
margin-bottom: 10px;
}

#content p.more {
clear:left;
text-align: right;
padding-right: 20px;
background: url(img/icon-arw01.png) no-repeat right center;

}

#profile,#entry {
margin-bottom: 20px;
}

.apply {
text-align: right;
padding: 20px;
background: url(img/icon-arw01.png) no-repeat right center;
}

.male {
color:cadetblue;
font-size: 16px;
}

.female {
color: brown;
font-size: 16px;
}

#footer {
border-top:1px dotted #666;
text-align:center;
padding:10px;
}

------------------------------------------------------------------------------------------------

もっと見るのアンカーらへんがあまりうまくいかなかった。

liをナビゲーションボタンに変えてみた。

ナビゲーションボタン画像をliのaにいれたらleft-topが三つもでてきてしまった。

だからulに画像をいれたけど

先日習ったナビゲーションボタン画像の挿入にはliのaにいれてちゃんと全体表示できてた。何故だろう・・・

要確認！

2/15 追記：

ナビゲーションボタンの入れ方が間違っていた。

liにid名を付けてそこに１つ１つホバー前の画像をいれるを忘れてた。

なんか変だと思っていたら・・・・

またやり直す予定。

WEB、始めました

半年間WEB制作の学校に通います。その記録。

休日　webページ作成の復習　ナビゲーションボタン画像の埋め込み