ボタンメニュー

マウスオーバーによってボタンの背景色や文字色が切り替わるメニューを作ります。

HTMLファイル

新しいファイルを開き、下記文書を<body>< /body >間に入力しマークアップする。

Contents
1年ドキュメント
手作りオモチャ
ご近所の仲間たち
ギャラリー
リンク集

「Contents」はh3に、「1年ドキュメント」以下5行は番号なしリストに設定し、リスト項目ごとにダミーのリンクを付ける。全体をidを「left」としたdivで括る。

<body>
<div id="left">
<h3>Contents</h3>
<ul>
<li><a href="#">1年ドキュメント</a></li>
<li><a href="#">手作りオモチャ</a></li>
<li><a href="#">ご近所の仲間たち</a></li>
<li><a href="#">ギャラリー</a></li>
<li><a href="#">リンク集</a></li>
</ul>
</div>
</body>

bodyの修飾

スタイルビューの「新しいスタイル」をクリックする。
セレクター欄に「body」と入力する。
カテゴリー「フォント」でfont-familyを「"ＭＳＰゴシック", sans-serif」に設定する。
カテゴリー「背景」でbackground-colorを「#fffac8」に設定し、適用　OKをクリックする。

メニューの幅

スタイルビューの「新しいスタイル」をクリックする。
セレクター欄に「#left」と入力する。
カテゴリー「配置」でwidthを「150px」に設定し、適用　OKをクリックする。

見出しの修飾

スタイルビューの「新しいスタイル」をクリックする。
セレクター欄に「#left h3」と入力する。
カテゴリー「フォント」でcolorを「#ffffff」に設定する。
カテゴリー「ブロック」でtext-alignを「center」に、line-heightを「1em」に設定する。
カテゴリー「ボックス」で上下方向のpaddingを「8px」に、左右方向のpaddingを「0px」に設定する。
カテゴリー「背景」でbackground-colorを「#f29700」に設定し、適用　OKをクリックする。

リストの修飾

スタイルビューの「新しいスタイル」をクリックする。
セレクター欄に「#left ul」と入力する。
カテゴリー「ボックス」でpadding及びmarginを「0」に設定する。
カテゴリー「リスト」でlist-style-typeを「none」に設定する。
カテゴリー「枠線」でborderを「solid 1px #f29700」に設定し、適用　OKをクリックする。

リンクリストの修飾

スタイルビューの「新しいスタイル」をクリックする。
セレクター欄に「#left li a」と入力する。
カテゴリー「フォント」でcolorを「#333333」に、text-decrationを「none」に設定する。
カテゴリー「ブロック」でline-heightを「1em」に、text-alginを「center」に設定する。
カテゴリー「ボックス」で上下方向のpaddingを「6px」に、上下方向のpaddingを「0」に、marginを「0」設定する。
カテゴリー「レイアウト」でdisplayを「block」に設定する。
カテゴリー「配置」でwidhtを「146px」に設定する。
カテゴリー「背景」でbackground-colorを「#fee28f」に設定にする。
カテゴリー「枠線」でborder-topを「solid 1px #ffffff」に、border-rightを「solid 1px #ffcf3f」に、border-bottomを「solid 1px #ffbe00」に、border-leftを「solid 1px #fef7e4」に設定し、適用　OKをクリックする。

マウスオーバーの修飾

スタイルビューの「新しいスタイル」をクリックする。
セレクター欄に「#left li a:hover」と入力する。
カテゴリー「フォント」でcolorを「#ffffff」に設定する。
カテゴリー「背景」でbackground-colorを「#d67400」に設定にする。
カテゴリー「枠線」でborder-topを「solid 1px #a65c04」に、border-rightを「solid 1px #ebb054」に、border-bottomを「solid 1px ##f3c377」に、border-leftを「solid 1px #a9600b」に設定し、適用　OKをクリックする。