『CSS メニューを作っちゃおう5（横メニュー1）』

CSSの編集で

実際は更新されているのに・・・

リクエストは既に処理中であるか無効です

ズ～っと表示されっぱなしです・・

何とかしてほしいものです・・

CSS　メニューを作っちゃおう（動画はドコ？）
CSS　メニューを作っちゃおう（動画はドコ？）2
CSS　メニューを作っちゃおう（動画はドコ？）3
CSS　メニューを作っちゃおう 4 CSS　

CSS　メニューを作っちゃおう6（横メニュー2）
CSS　メニューを作っちゃおう7　画像の置き換え

以前よりメニューについては説明してきましたが・・

もっとわかりやすくお願いします？

なんてリクをいただいちゃったんで・・

連休中・・頭は痛いし・・手はしびれちゃっているし・・耳が痛くて眠れません・・

本当は連休始めにアップする予定でしたが・・

な・・状態なのでこんなに遅れてしまいました・・

うまく説明が出来るか不安なんですが・・

3回に分けて説明します

1回目は全部CSSだけでやっちゃいます

2回目は背景に画像を使って見ます

3回目は背景も文字も全部画像でやります・・

まずは・・

フリースペースに<ul>と<li>を使いリスト構造でメニューを作成します

<div id="topmenu">
<ul>
<li><a href="リンク先のURL">ホーム</a></li>
<li><a href="リンク先のURL">ペ　タ</a></li>
<li><a href="リンク先のURL">メッセージ</a></li>
<li><a href="リンク先のURL">リンク</a></li>
</ul>
</div>

注意！フリープラグインに貼り付けるときに改行を削除します

<div id="topmenu"><ul><li><a href="リンク先のURL">ホーム</a></li><li><a href="リンク先のURL">ペ　タ</a></li><li><a href="リンク先のURL">メッセージ</a></li><li><a href="リンク先のURL">リンク</a></li></ul></div>

↑こんなように・・

ちなみにフリープラグインが文字数に余裕があって使える場合は改行は必要ありません

ホーム　　http://ameblo.jp/自分のID/
ルーム　　　http://profile.ameba.jp/自分のID/

ペタ　　　　http://peta.ameba.jp/p/addPeta.do?targetAmebaId=自分のID

読者になる http://blog.ameba.jp/reader.do?bnm=自分のID

メッセージ http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=自分のID

規約とかリンク集は　↓参考にその記事の記事のURLを使います

divにid名topmenu（自由に変更下さい）をつけて

あとで・・position: absolute;で・・移動させます

ちなみに・・リンク先のURLの調べ方・・

例えばペタの場合・・・

実際にペタをクリックしてペタ画面にいってアドレスを調べる・・

（記事へのリンクやアメブロ以外のサイトへのリンクもこうすればわかります）

ペタの上で右クリックします・・・・

IE以外でしたら・・・

これでリンク先のＵＲＬがコピーされます

次はCSSです

#topmenu {
width: 760px;/*ベーシックの場合は800pxです*/
height:30px;/*高さ*/
display: block;
}
#topmenu ul {
margin: 0;
padding: 0;
height:30px;/*高さ*/
background-color: #009900;
list-style-type: none;
}

#topmenu ul li {
margin: 0;
padding: 0;
float: left;
width: 100px;
text-align: center;
font-size: 12px; /* 文字サイズ */
}

#topmenu ul li a {
border-right: 1px solid #ffffff;
padding: 9px 0 0;
display: block;
color: #ffffff;
background-color: #009900;
text-decoration: none;
}

#topmenu ul li a:hover {
border-color: #33ff99;
color: #333333;
background-color: #33ff99;
}

/*ベーシックスキン　メニュー5個*/

#topmenu {
width: 800px;/*スキンの幅Ａ*/
font-size:14px;/*文字サイズ*/
font-weight:bold;/*太字*/
line-height:2;
display: block;
}
#topmenu ul{
margin:0;
padding:0;
}
#topmenu li {
width: 150px;/*1つの幅Ｂ*/
margin: 0 2px;/*メニューのスキマＣ*/
border: 3px double #fff;
background-color:#009900;
text-align: center;/*中央寄せ*/
display:inline;/*IE6対策*/
list-style: none;
float: left;
}
#topmenu li a {
color: #ffffff;/*文字色*/
border: 1px solid #ffffff;
margin: 1px;
text-decoration: none;
display: block;
}
#topmenu li a:hover {
color: #ffffff;/*オンマウス時文字色*/
background-color:#99FF00;/*オンマウス時背景色*/
}