トップメニューを横に並べてデザインする

　　この文字をクリックするとサンプルダウンロード出来ます。


トップメニューを作成する　←　｜　→　画像を組み込む


ここでする事は次の内容です。かなり、メニューらしくします。

　・メニュー項目を横に並べる
　・リンク用文字の先頭の　”・”マークを削除する。
　・リンク用文字の表示色を青色にする。
　・カーソルが乗った時、赤色に変る様にする。
　・メニュー領域に背景色を付ける

これらの設定は全てスタイルシートで行います。style-css.cssを開いて下さい。

●　スタイルシートに以下を追加します。

a　　　　　{　color: #0000ff;　}		リンク文字表示を青色に設定
a:hover　{　color: #ff0000;　}		カーソルが乗った時、赤色にする
ul　　　　{　list-style-type: none;		リストマークの”・”を消す
background-color: #bbffaa;		領域背景色を黄緑色にする
padding: 3px 20px;		上下、左右の位置を調整
margin-top: 0　}		上コンテンツ境界とピッタル付ける
li　　　　{　display: inline;		横並びのリストにする
padding-right: 10px;		項目の右を１０ピクセル空ける
font-size: 0.75em;　}		文字サイズを指定
li　a　　{　text-decoration: none;　}		リンク文字に下線が付かない様にする

---

●　各項目の説明。

�@　リンクのａタグで囲まれたコンテンツの表示色は青が通常です。
　　検索者のストレスをなくす為にセレクタａで、必ず青に設定して下さい。

�A　カーソルが乗った時、色を変える場合の表示色を設定します。何色でも構いません。
　　　a:hover　で指定します。　
�B　list-style-typeでリストのスタイルを設定。●や■も指定できますが、割愛します。

�C　background-colorで　ul　で設定したリストの背景色を設定します。

�D　margin　と　padding
　　文字や画像も周りを境界で囲まれています。特に指定しないと境界巾は０です。
　　marginは自分の境界と、上下左右にある他のコンテンツの境界との余白です。
　　paddingは自コンテンツと自分の境界との余白です。

　　

　　指定方法（paddingを例）　

　　・padding-top：上　　　　　上余白サイズを指定　padding-top:10px; など　
　　・padding-bottom：下　
　　・padding-left：左
　　・padding-right：右
　　・padding　上　右　下　左　padding:　10px　15px　1px　5px; など
　　・padding　上　左右　下
　　・padding　上下　左右　　　padding:　10px　15px（上下１０、左右１５）

�E　liタグのdisplayプロパティでリストを横に並べました
　　インライン要素、ブロック要素などが指定できますが、今回はインライン要素と
　　して設定しました。

　　ブロック要素にして、要素の巾・全体の巾設定で横に並べることも出来ます。

�F　リンクのａタグで囲まれたコンテンツは通常は下線付きにします。
　　リストタグ内のリンクにダケ下線を付けない様にしました。

　　li　a　｛　｝　は　liタグ内の　a　タグだけに適用される書き方です。

---

サンプルの表示イメージです。メニュー部分中心のイメージです。