メニュー部分を作る

ボタン風のメニューにしよう

メニュー部分を少しメニューらしくしたいですね。まずはHTMLにメニューであることの記述を以下のようにしましょう。先ほどまでは改行のタグを使っていましたが、ボタン風にしたいのでそれぞれのリンクを<div></div>で囲んでください。

つづき~
<div>
<h3>サイトマップ</h3>
<div><a href=”index.html” class=”mn”>トップページ</a></div>
<div><a href=”index.html” class=”mn”>1ページ</a></div>
<div><a href=”index.html” class=”mn”>2ページ</a></div>
<div><a href=”index.html” class=”mn”>3ページ</a></div>
<div><a href=”index.html” class=”mn”>4ページ</a></div>
<div><a href=”index.html” class=”mn”>5ページ</a></div>
</div>
</body>
~つづく

そしてスタイルシートファイルに以下の部分を追加してください。

a.mn:link {  /*未訪問のリンク*/
font-weight: bold;
color: #FFFFFF;
background-color: #7B7B3C;
display: block;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
width: 100%;
text-indent: 10px;
}
a.mn:visited {  /*訪問済みのリンク*/
font-weight: bold;
color: #FFFFFF;
background-color: #7B7B3C;
display: block;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
text-decoration: none;
width: 100%;
text-indent: 10px;
}
a.mn:hover {  /*マウスポインタが乗ったとき*/
font-weight: bold;
color: #7B7B3C;
background-color: #FFCC99;
display: block;
margin-top: 3px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
text-decoration: none;
width: 100%;
text-indent: 10px;
}

ちょっと長かったですね。「未訪問リンク」「訪問済みリンク」「マウスが乗っかったとき」と基本的な部分は同じです。ただ色が違うだけです。
よーくご覧になってそれぞれどこの部分の長さであるのかきちんと把握しましょう。さて、表示はどうなってますか?このようになっていますか?

また、「a.mn:hover」の部分などは変更したもののみの記述でも大丈夫です。「a.mn:link」と「a.mn:visiited」が同じであれば、「a.mn:link , a:mmn:visited」のようにまとめて書いてもOKです。

さてここまで出来たらほぼこのページは完成ですね。後は細かなところを調整しましょうか。

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録