スタイルシート（CSS）基礎講座
メニュー部分を作る
ボタン風のメニューにしよう
メニュー部分を少しメニューらしくしたいですね。まずはHTMLにメニューであることの記述を以下のようにしましょう。先ほどまでは改行のタグを使っていましたが、ボタン風にしたいのでそれぞれのリンクを<div></div>で囲んでください。
つづき～
<div class="sitemenu">
<h3>サイトマップ</h3>
<div><a href="index.html" class="mn">トップページ</a></div>
<div><a href="index.html" class="mn">１ページ</a></div>
<div><a href="index.html" class="mn">２ページ</a></div>
<div><a href="index.html" class="mn">３ページ</a></div>
<div><a href="index.html" class="mn">４ページ</a></div>
<div><a href="index.html" class="mn">５ページ</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です。
さてここまで出来たらほぼこのページは完成ですね。後は細かなところを調整しましょうか。
